● next.js サイトのインストールと起動（create-next-app コマンド）

npx create-next-app

実行するとサイト名を

What is your project named? … 

と聞かれますので入力します。（ 例: test-app）

アプリ名を指定して新規作成する場合は

npx create-next-app --example parameterized-routing test-app

のようにすると

example指定: parameterized-routing
アプリ名: test-app

で新規作成します。

Next.js公式examples集を分類

https://bit.ly/396iZE8

next.js の 起動 ( 1. dev )

npm run dev

next.js の 起動 ( 2. build & start )

npm run build
npm run start

next.js の ページを追加する

新規ファイルを作成

vi pages/page01.js

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div>
      <h1>Hello page01</h1>
    </div>
  )
}

これが URL
http://localhost:3000/page01

にあたります。

ボタンの作成

<Link href="/page02">
  <button>page02</button>
</Link>

● 静的サイトとしてビルドする

package.json

{
  "scripts": {
    ...
    "build_static": "next build && next export -o dist",
  },

（ "build_static"の行を追加します ）

ビルドの実行

npm run build_static

/dist/ フォルダに書出が行われます。

● examples

https://github.com/vercel/next.js/tree/master/examples