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

新しい Next.js プロジェクトのセットアップ方法

システム要件

始める前に、システムが次の要件を満たしていることを確認してください:

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

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"
}
}

これらのスクリプトは、アプリケーション開発のさまざまな段階を指します:

  • next dev: 開発サーバーを起動します
  • next build: アプリケーションを本番用にビルドします
  • next start: 本番サーバーを起動します
  • next lint: ESLint を実行します

app ディレクトリの作成

Next.js はファイルシステムルーティングを使用しているため、アプリケーション内のルートはファイルの構造によって決まります。

app フォルダを作成します。次に、app 内に layout.tsx ファイルを作成します。このファイルは root レイアウト です。これは必須であり、<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>
}

layout.tsxpage.tsx の両方が、ユーザーがアプリケーションの root (/) を訪れたときにレンダリングされます。

App Folder StructureApp Folder Structure

Good to know:

  • root レイアウトの作成を忘れた場合、next dev で開発サーバーを実行すると、Next.js が自動的にこのファイルを作成します。
  • プロジェクトの root に src ディレクトリ を使用して、アプリケーションのコードを設定ファイルから分離することができます。

public フォルダの作成(オプション)

プロジェクトの root に public フォルダ を作成して、画像やフォントなどの静的アセットを保存します。public 内のファイルは、ベースURL (/) から始まるコードで参照できます。

これらのアセットは root パス (/) を使用して参照できます。たとえば、public/profile.png/profile.png として参照できます:

app/page.tsx
import Image from 'next/image'

export default function Page() {
return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}

開発サーバーの実行

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

TypeScript のセットアップ

最小 TypeScript バージョン: v4.5.2

Next.js には組み込みの TypeScript サポートがあります。プロジェクトに TypeScript を追加するには、ファイルを .ts / .tsx にリネームして next dev を実行します。Next.js は必要な依存関係を自動的にインストールし、推奨される設定オプションを含む tsconfig.json ファイルを追加します。

IDE プラグイン

Next.js にはカスタム TypeScript プラグインと型チェッカーが含まれており、VSCode や他のコードエディタで高度な型チェックや自動補完を利用できます。

VS Code でプラグインを有効にするには:

  1. コマンドパレットを開く(Ctrl/⌘ + Shift + P
  2. 「TypeScript: Select TypeScript Version」を検索
  3. 「Use Workspace Version」を選択
TypeScript Command PaletteTypeScript Command Palette

詳細は TypeScript リファレンス ページを参照してください。

ESLint のセットアップ

Next.js には組み込みの ESLint が含まれています。create-next-app で新しいプロジェクトを作成するときに、必要なパッケージが自動的にインストールされ、適切な設定が構成されます。

既存のプロジェクトに ESLint を手動で追加するには、package.jsonnext lint をスクリプトとして追加します:

package.json
{
"scripts": {
"lint": "next lint"
}
}

次に、npm run lint を実行すると、インストールと設定プロセスが案内されます。

Terminal
npm run lint

次のようなプロンプトが表示されます:

? How would you like to configure ESLint?

❯ Strict (recommended)
Base
Cancel

  • Strict: Next.js の基本的な ESLint 設定に加えて、より厳格な Core Web Vitals ルールセットを含みます。初めて ESLint を設定する開発者に推奨される設定です。
  • Base: Next.js の基本的な ESLint 設定を含みます。
  • Cancel: 設定をスキップします。独自のカスタム ESLint 設定を設定する予定の場合、このオプションを選択します。

Strict または Base が選択されると、Next.js は自動的に eslinteslint-config-next をアプリケーションの依存関係としてインストールし、選択した設定を含む .eslintrc.json ファイルをプロジェクトの root に作成します。

ESLint を実行してエラーをキャッチしたいときは、next lint を実行できます。ESLint が設定されると、ビルド(next build)のたびに自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗しません。

詳細は ESLint プラグイン ページを参照してください。

絶対インポートとモジュールパスエイリアスの設定

Next.js には、tsconfig.json および jsconfig.json ファイルの "paths" および "baseUrl" オプションのサポートが組み込まれています。

これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス化し、モジュールのインポートをより簡単かつクリーンにすることができます。たとえば:

// Before
import { Button } from '../../../components/button'

// After
import { Button } from '@/components/button'

絶対インポートを設定するには、tsconfig.json または jsconfig.json ファイルに baseUrl 設定オプションを追加します。たとえば:

tsconfig.json or jsconfig.json
{
"compilerOptions": {
"baseUrl": "src/"
}
}

baseUrl パスの設定に加えて、"paths" オプションを使用してモジュールパスを "alias" することができます。

たとえば、次の設定は @/components/*components/* にマッピングします:

tsconfig.json or jsconfig.json
{
"compilerOptions": {
"baseUrl": "src/",
"paths": {
"@/styles/*": ["styles/*"],
"@/components/*": ["components/*"]
}
}
}

"paths"baseUrl の場所に対して相対的です。