Next.jsのプロジェクト作成

最近Next.jsに入門したので、自分的なプロジェクト作成のメモを残しておく

プロジェクト作成

推奨構成でプロジェクト作成

PROJECT_DIR_NAME=app

pnpm create next-app@latest $PROJECT_DIR_NAME --yes

オプションを明示的に指定してプロジェクト作成

PROJECT_DIR_NAME=app

# プロジェクト作成(オプションを明示的にしていして)
# --ts TypeScriptプロジェクトとして初期化
# --app: App Routerプロジェクトとして初期化
# --tailwind Tainwind CSS configを初期化
# --use-pnpm pnpmを利用
# --eslint ESLint configを初期化
# --turbopack バンドラーにturbopackを利用 (推奨)
# --react-compiler 再レンダリングを自動的に最適化する機能(まだ完全に安定しているわけではない)
# --src-dir src/ディレクトリの中にnext.jsプロジェクトのコードを置く構成にする (推奨)
pnpm create next-app@latest $PROJECT_DIR_NAME \
  --ts \
  --app \
  --tailwind \
  --use-pnpm \
  --eslint \
  --turbopack \
  --react-compiler \
  --src-dir
# ? Would you like to customize the import alias (`@/*` by default)? › No / Yes  ★ Noを選択

オプションの確認

pnpm create next-app --help

Usage: create-next-app [directory] [options]

Options:
  -v, --version                            Output the current version of create-next-app.
  --ts, --typescript                       Initialize as a TypeScript project. (default)
  --js, --javascript                       Initialize as a JavaScript project.
  --tailwind                               Initialize with Tailwind CSS config. (default)
  --react-compiler                         Initialize with React Compiler enabled.
  --eslint                                 Initialize with ESLint config.
  --biome                                  Initialize with Biome config.
  --app                                    Initialize as an App Router project.
  --src-dir                                Initialize inside a 'src/' directory.
  --turbopack                              Enable Turbopack as the bundler.
  --webpack                                Enable Webpack as the bundler.
  --rspack                                 Enable Rspack as the bundler
  --import-alias <prefix/*>                Specify import alias to use (default "@/*").
  --api                                    Initialize a headless API using the App Router.
  --empty                                  Initialize an empty project.
  --use-npm                                Explicitly tell the CLI to bootstrap the application using npm.
  --use-pnpm                               Explicitly tell the CLI to bootstrap the application using pnpm.
  --use-yarn                               Explicitly tell the CLI to bootstrap the application using Yarn.
  --use-bun                                Explicitly tell the CLI to bootstrap the application using Bun.
  --reset, --reset-preferences             Reset the preferences saved for create-next-app.
  --skip-install                           Explicitly tell the CLI to skip installing packages.
  --yes                                    Use saved preferences or defaults for unprovided options.
  -e, --example <example-name|github-url>  
  
    An example to bootstrap the app with. You can use an example name
    from the official Next.js repo or a public GitHub URL. The URL can use
    any branch and/or subdirectory.
  
  --example-path <path-to-example>         
  
    In a rare case, your GitHub URL might contain a branch name with
    a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).
    In this case, you must specify the path to the example separately:
    --example-path foo/bar
  
  --disable-git                            Skip initializing a git repository.
  -h, --help                               Display this help message.

起動

cd $PROJECT_DIR_NAME
pnpm dev

• http://localhost:3000 にアクセス

ディレクトリ構成

初期のディレクトリ構成

├── eslint.config.mjs
├── next.config.ts
├── next-env.d.ts
├── node_modules/
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── postcss.config.mjs
├── public/
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── README.md
├── src
│   └── app
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
└── tsconfig.json

公式がオススメしているディレクトリ構成

project-root/
  src/
    app/                # App Router
      layout.tsx          # ページのレイアウト: https://nextjs.org/docs/app/api-reference/file-conventions/layout
      page.tsx            # ページ: https://nextjs.org/docs/app/api-reference/file-conventions/page
      loading.tsx         # ローディングUI: https://nextjs.org/docs/app/api-reference/file-conventions/loading
      not-found.tsx       # 404エラーページ: https://nextjs.org/docs/app/api-reference/file-conventions/not-found
      error.tsx           # エラー画面: https://nextjs.org/docs/app/api-reference/file-conventions/error
      global-error.tsx    # グローバルエラー画面: https://nextjs.org/docs/app/api-reference/file-conventions/error#global-error
      route.ts            # https://nextjs.org/docs/app/api-reference/file-conventions/route
      template.tsx        # https://nextjs.org/docs/app/api-reference/file-conventions/template
      default.tsx         # https://nextjs.org/docs/app/api-reference/file-conventions/default
      globals.css        # グローバルスタイル
      note/
        layout.tsx
        page.tsx
        actions.ts        # ページ専用のserverアクション
        [slug]/           # 動的ルート: https://nextjs.org/docs/app/api-reference/file-conventions/dynamic-routes
          page.tsx
    features/          # アプリ固有の機能・ユースケース・ドメイン
      note/
        actions.ts       # ドメイン横断で利用するserverアクション
        schema.ts        # DTO、serverアクションの入出力の型など
        repository.ts    # DDD的なファイル(domain.ts, service.ts, application.ts)
        components/      # 機能ごとのUIコンポーネント
          NoteList.tsx
          NoteItem.tsx
    components/        # アプリ全体で使いまわせる汎用コンポーネント (ドメイン知識を持たない)
      ui/                # 共通UI部品 (shadcn/ui)
        Button.tsx
        Input.tsx
      layouts/           # サイドバー、ヘッダーなどの共通レイアウト
        PageHeader.tsx
    lib/               # アプリ全体で使えるツール
      db.ts              # prisma clientなど
      logger.ts          # pino/winston ラッパー
      fetcher.ts        # fetch ラッパー
      auth.ts            # 認証ライブラリのラッパー
    styles/
      themes/            # テーマ関連
  public/            # 静的アセット
  proxy.js           # middlewareの定義: https://nextjs.org/docs/app/api-reference/file-conventions/proxy
  instrumentation.ts # OpenTelemetry と計測用ファイル : https://nextjs.org/docs/app/guides/instrumentation
  next.config.js     # Next.js の設定ファイル: https://nextjs.org/docs/app/api-reference/config/next-config-js
  package.json       # プロジェクトの依存関係とスクリプト
  tsconfig.json      # TypeScript の設定ファイル
  eslint.config.mjs  # ESLint の設定ファイル
  next-env.d.ts      # Next.js用の型定義ファイル (next dev, next buildで自動生成される。next typegenで明示的に生成することも可能)
  .gitignore
  .env
  .env.local
  .env.example