Next.js入門#1 Next.jsを始める
Next.jsを公式ドキュメントに沿って学習していきます。今回は「#1 Next.jsを始める」です。
Contents
セットアップ
推奨
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-dompackage.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