今回はNext.jsの構成ファイルについて紹介します。紹介しきれていないものについては今後加筆予定です。
現段階では、今後のプロジェクトで活用する重要度の高いファイルに絞って紹介しています。
Next.jsの構成ファイルを把握する
create-next-appで生成されたファイルの構成を、よく使用するものを中心に確認していきます。
package.json
package.jsonとは、主にnpm installしたパッケージの依存関係を管理するためのファイルです。
package.jsonでは様々な設定が可能ですが、hello-world/package.jsonファイルにもすでにいくつかの項目が記載されているはずです。
そのうち、name、version、privateなどは単なるメタデータであるため、パッケージを公開するつもりがない限りは気にする必要はありません。
重要なのはscripts、dependencies、devDependenciesの3つです。
"scripts"
scriptsには、コマンド操作を簡素化する目的でエイリアスを登録でき、登録したエイリアスはnpm run ○○で実行できます。
Next.jsにデフォルトで登録されているscriptsは、次の3つです。
- "dev"：開発モードでアプリケーションを起動する
- "build"：本番環境へデプロイする準備を行う
- "start"：ビルドしたアプリケーションを本番モードで起動する
"dependencies"と"devDependencies"
その名の通り、パッケージが依存する別のパッケージの名前とバージョンが記載されています。
両者の違いは、前者にはアプリケーションの実行に必要なパッケージの依存関係を記し、後者は開発やテストのみに必要なパッケージの依存関係を記す点にあります。
開発やテストのみに使用するパッケージというのは、例えばコードの実行前にバグを見つけたり記述スタイルを統一するツールである「ESLint」などがあります。
以下の記事では、初心者向けにnpmとpackage.jsonについて分かりやすく説明してくれています。
npmとは？packge.jsonとは？バージョンの意味は？などなど、根本的な疑問を解決してくれる良質な記事なのでおススメです。
styles
stylesフォルダにはglobals.cssとHome.module.cssが含まれています。
それぞれでCSSが指定されていますが、プロジェクト内の他のフォルダでもCSSファイルを作成することはできるため、特別重要なフォルダではありません。
public
publicフォルダーは、画像などの静的ファイルを配信するために利用する重要なディレクトリです。画像の他にもrobots.txtやfavicon.icoなどを格納できます。
例えば、publicフォルダにsample.pngを格納した場合、ベースURL（'/'）から始まるコードで参照できます。（例：/sample.png）
Reactの場合、publicフォルダーにはReactアプリケーションの単一のHTML（index.html）が格納されていますが、Next.jsには含まれません。これは、ReactとNext.jsではHTMLの生成方法が異なるためです。この点については別の記事で詳しく解説します。
pages
Next.jsプロジェクトにおいて最も重要なフォルダがpagesです。pages内のディレクトリ構成が、そのままアプリケーションのルーティング機能に対応します。
デフォルトでは、ルートURL（'/'）に対応するindex.jsファイルなどが含まれています。
まとめ
次回はNext.jsのルーティング機能について紹介します。
