🚀

【Next.js和訳】Getting Started

2021.10.02に公開

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、Getting Startedの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Next.jsのドキュメントへようこそ。
Next.jsを初めてお使いになる方は、まずlearnコースから始められることをお勧めします。

クイズを交えたインタラクティブなコースで、Next.jsを使うために必要な知識をすべて学ぶことができます。

Next.jsに関する質問がある場合は、GitHub Discussionsのコミュニティにいつでもお問い合わせください。

create-next-appを使って新しいNext.jsアプリを作成することをお勧めします。このアプリでは、すべてが自動的に設定されます。プロジェクトを作成するには、次のように実行します。

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

TypeScriptのプロジェクトから始めたい場合は、--typescriptフラグを使用します。

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

インストールが完了したら、指示に従って開発サーバーを起動します。pages/index.jsを編集してみて、ブラウザで結果を確認してください。

create-next-appの使い方の詳細については、create-next-appのドキュメントをご覧ください。

next、react、react-domをプロジェクトにインストールします。

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

package.jsonを開き、以下のscriptsを追加します。

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

これらのスクリプトは、アプリケーション開発の各段階に対応しています。

dev - next devを実行し、Next.jsを開発モードで起動します。
build - next buildを実行し、本番環境用のアプリケーションを構築します。
start - Next.jsの本番サーバーを起動するnext startを実行します。
lint - Next.jsに内蔵されているESLintの設定を行うnext lintを実行します。
Next.jsは、ページという概念で構成されています。ページは、pagesディレクトリにある.js、.jsx、.ts、.tsxファイルからエクスポートされたReactコンポーネントです。

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

プロジェクト内にpagesディレクトリを作成します。

./pages/index.jsに以下の内容を記述します。

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

アプリケーションの開発を開始するには、npm run dev または yarn dev を実行します。これにより、http://localhost:3000、開発サーバーが起動します。

アプリケーションを見るには、http://localhost:3000 にアクセスしてください。

ここまでで得られたものは

自動コンパイル、自動バンドル（webpackとbabelを使用
Reactの高速リフレッシュ
./pages/の静的生成とサーバーサイドレンダリング
静的ファイルの提供。./public/は/にマッピングされます。
さらに、Next.jsのアプリケーションは、最初から本番環境に対応しています。詳しくはDeploymentドキュメントをご覧ください。