Next.jsを公式ドキュメントに沿って学習していきます。今回は「#1 Next.jsを始める」です。

セットアップ

推奨

Nextのアプリの作成にはcreate-next-appコマンドが推奨されています。

npx create-next-app
# or
yarn create next-app

コマンドを実行するとプロジェクト名を聞かれるので入力します。しばらく待っているとアプリが作成されます。

プロジェクトファイル

自動生成されるファイルは以下の通りです。

手動セットアップ

next、react、react-domをインストールします。

npm install next react react-dom
# or
yarn add next react react-dom

package.jsonを開き、以下のスクリプトを記述します。

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

各コマンドは以下の通りです。

• dev：next devは開発モードで起動する
• build：next buildは本番モードでビルドする
• start：next startは本番モードで起動する

npm run dev または、yarn devを実行すると、http://localhost:3000上でアプリケーションが起動します。アクセスするとWelcomeページが表示されるかと思います。

nextについて

Next.jsはページの概念に基づいて構築されています。

一つのページはReactコンポーネントで、pagesフォルダ内の.js, .jsx, .ts, または.tsxファイルからエクスポートされています。

それぞれのページはルートからファイル名で関連付けられています。
例えばpages/about.jsは/aboutに紐づけられます。

この時点で、

• 自動コンパイルとバンドル(webpack、babelを使用)
• ホットリロード
• SSG/SSR。対象は./pages/
• 静的ファイル配信。./public/が/にマッピング

が実現されています。

備考

公式ドキュメントURL

今回の記事は以下のページの内容です。
https://nextjs.org/docs/getting-started

Gitリポジトリ

作成したものは以下にあります。
https://github.com/shinjiezumi/nextjs-learning

えず

東京でフリーランスのWebエンジニアやっています。 今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。 当面の目標はDevOps寄りのオールラウンダー。