Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

新しい 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ファイルを開き、次の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設定をセットアップします。

pagesディレクトリを作成する

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

プロジェクトのルートに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>
  )
}

publicフォルダを作成する(オプション)

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

開発サーバーを実行する

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

TypeScriptの設定

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

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

プロジェクトでTypeScriptを使用する方法の詳細については、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設定を含めません。独自のカスタムESLint設定をセットアップする予定がある場合のみ、このオプションを選択してください。

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

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

プロジェクトでESLintを設定する方法の詳細については、ESLintプラグインページをご覧ください。

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

Next.jsには、tsconfig.jsonおよびjsconfig.jsonファイルの"paths"および"baseUrl"オプションの組み込みサポートがあります。これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアス設定でき、モジュールのインポートが容易になります。例えば:

// 変更前
import { Button } from '../../../components/button'
 
// 変更後
import { Button } from '@/components/button'

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

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

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

例えば、次の設定では@/components/*components/*にマップします:

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

それぞれの"paths"baseUrlの場所に相対的です。例えば:

src/app/page.tsx
TypeScript
import Button from '@/components/button'
import '@/styles/styles.css'
 
export default function HomePage() {
  return (
    <div>
      <h1>Hello World</h1>
      <Button />
    </div>
  )
}