デザイナーでもわかる！Next.jsのはじめかた

[Ateam Lifestyle Advent Calendar 2020](https://qiita.com/advent-calendar/2020/ateam-lifestyle)の16日目は、株式会社エイチームライフスタイル デザイナー @kmfj  が担当します！

## はじめに

業務でReactを使う機会が増えてきたので、Reactを使ってサイトを作ってみたいなーとぼんやり思っていました。
Reactのフレームワークで有名どころ[^1]はGatsbyとNext.jsですが、GatsbyではLPを作る経験をしたので、Next.jsとどう違うのか勉強ついでに触ってみたかったのと、next/imageを試してみたかったため、今回使ってみることにしました。[チュートリアル](https://nextjs.org/learn/basics/create-nextjs-app)を通して簡単なページを作成してみた覚え書きです。

## Next.jsとは？

Next.jsはReactベースのフレームワークです。
「バンドル」「コンパイル」「ルーティング」など**デザイナーが訳わからん部分**の機能が内臓されていて、所定のディレクトリ構造に沿ってファイルを設置するだけでサイトを簡単に作成できます。SSRもSSGもできてすごいヤツらしい。

## 手順

まずは作業ディレクトリ内に、Next.jsをインストールします。

```git
$ npx create-next-app 任意のディレクトリ名 --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
```

今回はディレクトリ名を`nextjs-blog`としました。このディレクトリに移動します。

```
$ cd nextjs-blog
```

サーバーを立ち上げるために下記のコマンドを実行します。

```
$ npm run dev
```

`http://localhost:3000`にアクセスすると下記のようなテンプレートページが表示されます。
![スクリーンショット 2020-12-15 3.44.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/84f41e67-1f58-abfd-f3cc-fc47f9026d71.png)

チュートリアルを進めると、`pages`配下に`posts/first-post.js`を作るよう言われるので作成し、下記の内容を記述します。

```jsx
export default function FirstPost() {
  return <h1>First Post</h1>
}
```

`http://localhost:3000/posts/first-post`にアクセスすると、先ほど作成した"First Post"のページが表示されます！
**`pages`ディレクトリにファイルを置くだけ**で、ファイルへのパスがURLのパスになります。

そのままチュートリアルを進めると下記のようなブログページが完成します。
![スクリーンショット 2020-12-15 3.48.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/1558331f-451e-bc35-94a0-32565e035213.png)

## next/imageによる画像最適化

Next.js 10へのアップデートで画像最適化が簡単にできるようになったそうなので使ってみます。
- 参考：[next/image | Next.js](https://nextjs.org/docs/api-reference/next/image)

`public`配下に対象の画像を配置し、画像を追加したいファイルに下記を追加します。

```js
import Image from 'next/image'
// 中略 //
<Image
  src="/main.jpg" // publicに配置した画像
  alt="mainImage"
  width={2000} //widthとheightはアスペクト比を画像と合わせる
  height={700}
/>
```
これだけで完了です！
![スクリーンショット 2020-12-15 14.47.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/2bc0d698-117d-b32f-e7d5-ab77e8806e9c.png)
上が`<img>`タグで読み込んだもので、下がImageコンポーネントの画像です。
サイズがかなり小さくなっていることがわかります。
[objectFitなどにも対応](https://nextjs.org/docs/api-reference/next/image#objectfit)していて便利そう。

その後好きにスタイルを調整し、簡単なブログページを作ることができました。
![スクリーンショット 2020-12-15 16.14.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/9ca6207a-8ee1-18d6-c15b-17ea2c54b108.png)

ちなみにNext.jsはCSS Modulesを推奨しているため[^2]、今回はCSS Modulesでスタイルを当てていきました。
ですが、styled-componentやemotionなどのCSS-in-JSにも対応しているので利用できない訳ではありません。[^3]

## Gatsbyと比較して

Next.jsはシンプルで自由度が高く、拡張性がとても高いと感じました。
また、画像の最適化はNext.jsの方が簡単でした。[Gatsbyの画像最適化](https://www.gatsbyjs.com/plugins/gatsby-image/)はGraphQLの記述などで苦戦したので、画像サイズの指定だけですんだのはありがたかったです。

テーマやプラグインの充実度はGatsbyが圧倒的だと思いました。
スターターの[テンプレートサイト](https://www.gatsbyjs.com/starters/)も見ているだけで楽しいです。
デザイナーが気軽にサイトを作ろうと思ったらGatsbyの方が適しているのかもしれません。

## おわりに

本当に簡単にサイトが作成できるので、私と同じ初心者の人の背中を押せれば幸いです。
自分用のサイトページが作れたので、これからはstorybookを入れたり勉強の場として使っていこうと思います。
最後まで読んでいただきありがとうございました！


[^1]: https://tsh.io/state-of-frontend/#jamstack
[^2]: https://github.com/vercel/next.js/issues/15542
[^3]: https://nextjs.org/learn/basics/assets-metadata-css/css-styling