インストール
システム要件:
- Node.js 18.18 またはそれ以降
- macOS、Windows(WSL を含む)、Linux がサポートされています
自動インストール
新しい Next.js アプリを作成するには、すべてを自動的に設定する create-next-app
の使用をお勧めします。プロジェクトを作成するには、以下を実行します:
npx create-next-app@latest
インストール時に、以下のプロンプトが表示されます:
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*
プロンプトの後、create-next-app
はプロジェクト名のフォルダを作成し、必要な依存関係をインストールします。
Next.js を初めて使用する場合は、プロジェクト構造のドキュメントでアプリケーション内の可能なファイルとフォルダの概要を参照してください。
補足:
- Next.js は、デフォルトで TypeScript、ESLint、Tailwind CSS の設定を提供しています。
- プロジェクトのルートに
src
ディレクトリをオプションで使用して、アプリケーションのコードと設定ファイルを分離できます。
手動インストール
新しい Next.js アプリを手動で作成するには、必要なパッケージをインストールします:
npm install next@latest react@latest react-dom@latest
package.json
ファイルを開き、以下のスクリプトを追加します:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
これらのスクリプトは、アプリケーション開発の異なる段階を指します:
dev
: 開発モードで Next.js を起動するnext dev
を実行します。build
: 本番環境用にアプリケーションをビルドするnext build
を実行します。start
: Next.js の本番サーバーを起動するnext start
を実行します。lint
: Next.js の組み込み ESLint 設定をセットアップするnext lint
を実行します。
ディレクトリの作成
Next.js はファイルシステムルーティングを使用するため、アプリケーション内のルートはファイルの構造によって決定されます。
app
ディレクトリ
新しいアプリケーションでは、App Router の使用をお勧めします。このルーターは、React の最新機能を使用でき、コミュニティからのフィードバックに基づいた Pages Router の進化版です。
app/
フォルダを作成し、layout.tsx
と page.tsx
ファイルを追加します。これらは、ユーザーがアプリケーションのルート(/
)を訪れたときにレンダリングされます。
app/layout.tsx
内に ルートレイアウト を作成し、必要な <html>
および <body>
タグを含めます:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
最後に、初期コンテンツを含むホームページ app/page.tsx
を作成します:
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
補足:
layout.tsx
を作成し忘れても、next dev
で開発サーバーを実行すると、Next.js が自動的にこのファイルを作成します。
App Router の使用についてさらに詳しく学びます。
pages
ディレクトリ(オプション)
App Router の代わりに Pages Router を使用する場合は、プロジェクトのルートに pages/
ディレクトリを作成できます。
次に、pages
フォルダ内に index.tsx
ファイルを追加します。これがホームページ(/
)になります:
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
次に、pages/
内に _app.tsx
ファイルを追加してグローバルレイアウトを定義します。カスタム App ファイルについてさらに詳しく学びます。
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
最後に、サーバーからの最初のレスポンスを制御するために、pages/
内に _document.tsx
ファイルを追加します。カスタム Document ファイルについてさらに詳しく学びます。
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Pages Router の使用についてさらに詳しく学びます。
補足:両方のルーターを同じプロジェクト内で使用できますが、
app
のルートはpages
よりも優先されます。混乱を避けるために、新しいプロジェクトでは1つのルーターのみを使用することをお勧めします。
public
フォルダ(オプション)
画像、フォントなどの静的アセットを保存するために public
フォルダを作成します。public
ディレクトリ内のファイルは、ベース URL(/
)から始まるコードで参照できます。
開発サーバーの実行
- 開発サーバーを起動するために
npm run dev
を実行します。 - アプリケーションを表示するために
http://localhost:3000
にアクセスします。 app/page.tsx
(またはpages/index.tsx
)ファイルを編集して保存し、ブラウザで更新された結果を確認します。