インストール

システム要件：

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を初めて使用する方は、アプリケーション内のすべての可能なファイルとフォルダの概要を確認するためにプロジェクト構造のドキュメントをご覧ください。

Good to know:

Next.jsには、デフォルトでTypeScript、ESLint、およびTailwind CSSの設定が組み込まれています。

任意でプロジェクトのrootにsrcディレクトリを使用し、アプリケーションのコードを設定ファイルから分割することができます。

手動インストール

Next.jsアプリを手動で作成するには、必要なパッケージをインストールします：

Terminal

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

package.jsonファイルを開き、次のscriptsを追加します：

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ファイルを追加します。これらはユーザーがアプリケーションのroot（/）を訪れたときにレンダリングされます。

app/layout.tsx内に必要な<html>および<body>タグで構成されるroot レイアウトを作成します：

TypeScript
JavaScript

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

app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

最後に、ホームページ用にapp/page.tsxを作成し、いくつかの初期コンテンツを追加します：

TypeScript
JavaScript

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

app/page.js
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

Good to know: layout.tsxを作成するのを忘れた場合、next devで開発サーバーを実行すると、Next.jsが自動的にこのファイルを作成します。

App Routerの使用方法についてさらに学びましょう。

`pages`ディレクトリ（オプション）

App RouterではなくPages Routerを使用したい場合、プロジェクトのrootにpages/ディレクトリを作成できます。

その後、pagesフォルダ内にindex.tsxファイルを追加します。これがホームページ（/）になります：

TypeScript
JavaScript

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

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

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

TypeScript
JavaScript

pages/_app.tsx
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

pages/_app.js
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

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

TypeScript
JavaScript

pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Pages Routerの使用方法についてさらに学びましょう。

Good to know: 同じプロジェクトで両方のルーターを使用することはできますが、app内のルートはpagesより優先されます。混乱を避けるため、新しいプロジェクトでは1つのルーターのみ使用することをお勧めします。

`public`フォルダ（オプション）

静的なアセット（画像、フォントなど）を保存するためにpublicフォルダを作成します。publicディレクトリ内のファイルは、ベースURL（/）から始めてコードで参照できます。

開発サーバーを実行する

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

自動インストール​

手動インストール​

ディレクトリの作成​

appディレクトリ​

pagesディレクトリ（オプション）​

publicフォルダ（オプション）​

開発サーバーを実行する​