【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