Next.jsを公式に沿ってインストールしてみる備忘録

Next.js 公式ページのざっくりした日本語訳。

環境

• Windows 10 Pro 21H1
• VSCode：1.63.2
• npm：6.14.8
• Node：v16.13.1

手順

自動でセットアップしたいとき(推奨)

新しいAppをインストールする

npx create-next-app@latestまたはyarn create next-appをターミナルで打つ。(npxについてはこちら)
create-next-appを使うと自動ですべてセットアップしてくれるので推奨。
typescriptで開発したい場合は、上記のコマンドに--typescriptオプションをつければOK。
途中でどんなプロジェクト名にするか聞かれるの(What is your project named? )で、好きな名前を入れる。
これら👇を一緒に入れてくれる。

今👇こんな感じ

実行してみる

作成したプロジェクトに移動(cd プロジェクト名)して、npm run devするとアプリが立ち上がる。

マニュアルでセットアップしたいとき

next、react、react-domをインストールする。
npm install next react react-domまたはyarn add next react react-dom
今回は以下のバージョンがインストールされた。

• react：17.0.2
• react-dom：17.0.2
• next：12.0.7

package.jsonを作成して以下の情報を追加する

"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}

ためしにnpm run devしてみると、

404になる。

pagesフォルダを追加する。
pagesフォルダにindex.jsファイルを追加する。中身は、

  function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

npm run devで実行する。

ページは、それぞれのファイル名に基づいて関連付けられている。
例えば、pages/about.jsは、about.jsにマップされる。
ファイル名を使って、動的なルートパラメータを追加することもできる。