Next.js初心者入門記事


はじめに
---------------------------------------
これは 株式会社 RetailAI X Advent Calendar 2022 の 4 日目の記事です。
昨日は @daisuke-yamamoto さんの記事でした。 [Terraform、後から来る辛みと処方箋🌶](https://qiita.com/daisuke-yamamoto/items/d13bbf9ddf8be9f55940)

本日は『Next.js初心者入門記事』です。

UIパーツを構築するためのJavaScriptライブラリReactとやりやすく開発できるためのReactのフレームワークNext.jsの利用会社は増加しています。

では、React勉強した後、早くNext.jsを利用してプロジェクト始まりたいために、事前理解しないといけないことを整理させていただきました。

Reactから、Next.jsへ
---------------------------------------

もちろん、`` npx create-next-app ``or ``yarn create next-app``で簡単にNext.jsのプロジェクト作れますが、ここでReactのみ使っているプロジェクトとの違いを示すために、ReactアプリからNext.jsへの遷移方法を説明します。

ここで、Reactで作ってたサンプルコード（index.html）一例用意しました。
```
<html>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/jsx">
      const app = document.getElementById("app")

      function Header({ title }) {
        return <h1>{title ? title : "Default title"}</h1>
      }

      function HomePage() {
        const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]

        const [likes, setLikes] = React.useState(0)

        function handleClick() {
          setLikes(likes + 1)
        }

        return (
          <div>
            <Header title="Develop. Preview. Ship. 🚀" />
            <ul>
              {names.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>

            <button onClick={handleClick}>Like ({likes})</button>
          </div>
        )
      }

      ReactDOM.render(<HomePage />, app)
    </script>
  </body>
</html>
```

Next.jsのパッケージはnpmで管理されていますので、``unpkg.com``からの依存関連は必要ないです。

まずは新しい``package.json``ファイルを作ります。(何も入っていないオブジェクト含め)
```
// package.json
{
}
```
ターミナルで``npm install react react-dom next``を実行します。
そしたら、``package.json``ファイルが次のようになります。同時に実際に依存ファイル含めるのフィルター``node_modules``も作られています。
```
// package.json
{
  "dependencies": {
    "next": "^12.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}
```
次はいらないコードの削除します。

- ``react``と``react-dom``関連のscript(npmがインストールしてくれたから)
- ``<html>`` と``<body>``（Next.jsが作ってくれるから）
- ``babel``のscript(Next.jsのコンパイラーがJXSファイルをブラウザが理解できるjavascripへの通訳してくれるから)
- ``app``と`` ReactDOM.render``
- ``<script type="text/jsx"> ``タグ
- ``React.useState(0)``の中の``React.``

上にコード追加します。

- ``import { useState } from "react" ``



変換されたコードは次のようになります。

```
// index.html
import { useState } from 'react';
function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  const [likes, setLikes] = useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>

      <button onClick={handleClick}>Like ({likes})</button>
    </div>
  );
}
```
完全にNext.jsへ遷移できるあめ、まだ次の作業が必要です。

- ファイルタイプを``.html``から``.js``or``.jxs``へ変更
- Reactコンポーネントにexport追加
```
// ...
   export default function HomePage() {
   //  ...
```
- Next.jsのdevelopmentサーバが起動できるために、
``package.json``ファイルに``scripts``追加
```
// package.json
   {
    "scripts": {
        "dev": "next dev"
    },
     // "dependencies": {
     //   "next": "^11.1.0",
     //   "react": "^17.0.2",
     //   "react-dom": "^17.0.2"
     // }
   }
```

これでターミナルで``npm run dev``を起動する時、``localhost:3000``でアプリの確認ができます。

サンプルコードの最終型か次のような感じです。
```
//index.jxs
import { useState } from 'react';

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}

export default function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
  const [likes, setLikes] = useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>

      <button onClick={handleClick}>Like ({likes})</button>
    </div>
  );
}
```
前のサンプルコードと比べると大分短くなっているので、Reactの目的『UIパーツを構築するため』が明確に見えるようになっています。


終わりに
---------------------------------------

いろんなフレームワークのおかげで、開発が楽になるのはありがたいことです。
開発者としては、その楽の原因、フレームワークが何していただいたことを理解するのは、問題調査にも役たつと思います。

Next.jsの勉強を通して、Reactの性格も分かるようになっている気がします。
「お前がUIパーツのデザインをよく考え！他は俺に任せて！」とReactが言ってくれたみたいです。www

明日 5 日目の記事は @tomoyuki-suzuki さんの　『Astro を使ってブログをRSSフィードで公開してみる。』　です。
お楽しみにしていただければ幸いです。

参考
---------------------------------------
この記事は以下の情報を参考にして執筆しました。
https://nextjs.org/learn/foundations/from-react-to-nextjs