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

インストール

システム要件:

自動インストール

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 では、TypeScriptESLintTailwind 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.tsxpage.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)ファイルを編集して保存すると、ブラウザで更新された結果が表示されます