Menu

インストール

システム要件：

  • Node.js 18.18 またはそれ以降
  • macOS、Windows（WSL を含む）、Linux がサポートされています

自動インストール

新しい Next.js アプリを作成するには、すべてを自動的に設定する create-next-app の使用をお勧めします。プロジェクトを作成するには、以下を実行します：

Terminal
npx create-next-app@latest

インストール時に、以下のプロンプトが表示されます：

Terminal
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 アプリを手動で作成するには、必要なパッケージをインストールします：

Terminal
npm install next@latest react@latest react-dom@latest

package.json ファイルを開き、以下のスクリプトを追加します：

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> タグを含めます：

app/layout.tsx
TypeScript
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

最後に、初期コンテンツを含むホームページ app/page.tsx を作成します：

app/page.tsx
TypeScript
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 ファイルを追加します。これがホームページ（/）になります：

pages/index.tsx
TypeScript
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

次に、pages/ 内に _app.tsx ファイルを追加してグローバルレイアウトを定義します。カスタム App ファイルについてさらに詳しく学びます。

pages/_app.tsx
TypeScript
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

最後に、サーバーからの最初のレスポンスを制御するために、pages/ 内に _document.tsx ファイルを追加します。カスタム Document ファイルについてさらに詳しく学びます。

pages/_document.tsx
TypeScript
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（/）から始まるコードで参照できます。

開発サーバーの実行

  1. 開発サーバーを起動するために npm run dev を実行します。
  2. アプリケーションを表示するために http://localhost:3000 にアクセスします。
  3. app/page.tsx（または pages/index.tsx）ファイルを編集して保存し、ブラウザで更新された結果を確認します。

次のステップ

Next.js プロジェクト内のファイルとフォルダについて学びます。

Next.js プロジェクト構造

Next.js プロジェクトのフォルダとファイルの規約のリスト