メインコンテンツまでスキップ

インストール

システム要件：

自動インストール​

create-next-appを使用して新しい Next.js アプリを作成することをお勧めします。プロジェクトを作成するには以下を実行します。

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 to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

プロンプトの後、create-next-appはプロジェクト名のフォルダを作成し、必要な依存関係をインストールします。

Good to know:

  • Next.js では、TypeScript、ESLint、Tailwind CSS の設定がデフォルトで提供されるようになりました。
  • オプションで、プロジェクトのルートに 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 devを実行して、Next.js を開発モードで開始します
  • build: next buildを実行して、本番環境用にアプリケーションをビルドします
  • start: next startを実行して、Next.js の本番サーバーを起動します
  • lint: next lintを実行して、Next.js ビルトインの ESLint を設定します

ディレクトリの作成​

Next.js はファイルシステムによるルーティングを使用します。つまり、ファイルをどのように構成するかによって、アプリケーションのルートが決まります。

app ディレクトリ​

新しいアプリケーションには、App Router の使用をお勧めします。この Router は、React の最新機能を使うことができ、コミュニティからのフィードバックに基づいて Pages Router を進化させたものです。

App Router を使用するには、app/フォルダを作成し、layout.tsxとpage.tsxファイルを追加します。これらは、ユーザーがアプリケーションのルート（/）へアクセスしたときにレンダリングされます。

app/layout.tsx内に、必要な<html>タグと<body>タグを含むルート・レイアウトを作成します：

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

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

app/page.tsx
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 を使いたい場合は、プロジェクトのルートにpages/ディレクトリを作成します。

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

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

次に、グローバル・レイアウトを定義するために、_app.tsxファイルをpages/の中に追加します。Appファイルをカスタムするには、こちらを参照してください）。

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

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

最後に、_document.tsxファイルをpages/の中に追加し、サーバーからの初期レスポンスを制御します。カスタムDocumentファイルの詳細については、こちらを参照してください。

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

開発サーバーの実行​

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