【Next.js和訳】Getting Started
この記事について
この記事は、Getting Startedの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
はじめに
Next.js のドキュメントへようこそ。
Next.js を初めてお使いになる方は、まずlearn コースから始められることをお勧めします。
クイズを交えたインタラクティブなコースで、Next.js を使うために必要な知識をすべて学ぶことができます。
Next.js に関する質問がある場合は、GitHub Discussionsのコミュニティにいつでもお問い合わせください。
システム要件
- Node.js 12.0またはそれ以降
- MacOS、Windows（WSL を含む）、Linux がサポートされています。
セットアップ
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 ドキュメントをご覧ください。
関連情報
次に何をすべきかについての詳細は、以下のセクションをお勧めします。
Discussion