Next.js の使い方 (Reactハンズオンラーニング 第2版 のサンプル)

Next.js は React のサーバーサイドレンダリングのためのツールです。

Reactハンズオンラーニング 第2版 の 12.3 のサンプルを動かして見ました。
Node.js のバージョンは次の通りです。

$ node --version
v18.4.0

プロジェクトの作成

mkdir proj02
cd proj02
npm init -y
npm install --save react react-dom next
mkdir pages

この時点でのフォルダーの状況

$ tree -I node_modules
.
├── package-lock.json
├── package.json
└── pages

package.json の改造

package.json

{
  "name": "proj01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^12.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

コードの作成

pages/index.js

import Layout from "./Layout"

export default function Index() {
  return (
    <Layout>
      <div>
        <h1>Hello everyone!</h1>
	<p>May/23/2022 PM 14:16</p>
      </div>
    </Layout>
  )
}

pages/Layout.js

export default function Layout(props) {
  return (
    <div>
{props.children}
    </div>
  )
}

この時点でのフォルダーの状況

$ tree -I node_modules/
.
├── package-lock.json
├── package.json
└── pages
    ├── Layout.js
    └── index.js

サーバーの起動

npm run dev

ブラウザーで
http://localhost:3000
にアクセス

使ったバージョン

$ npm list --depth=0

├── next@12.2.0
├── react-dom@18.2.0
└── react@18.2.0