Next.js初期構築の最小手順｜非エンジニアでもゼロから動かす20ステップ実装ガイド

Next.js初期構築で最初に決めること

Next.jsでサイトを作り始めるときは、最初に構成を複雑にしすぎないことが大切です。

特に、WordPressからNext.jsへ移行する場合や、Headless WordPress構成でフロントエンドだけNext.jsにする場合は、最初から完璧な設計を目指すよりも、まずは最小構成で動く状態を作ることが重要です。

初期構築で決めるべきことは、主に以下です。

JavaScriptで作るか、TypeScriptで作るか
App Routerを使うか
Tailwind CSSを使うか
srcディレクトリを使うか
記事データをどこで管理するか
デプロイ先をどこにするか

現在のNext.jsでは、App Routerを使う構成が基本です。

App Routerは、app ディレクトリを中心にページやレイアウトを管理する仕組みです。Next.js公式ドキュメントでも、App Router は React Server Components などの新しいReact機能に対応したルーターとして説明されています。

小規模なサイトや最初の構築では、以下の構成がおすすめです。

Next.js
App Router
JavaScriptまたはTypeScript
Tailwind CSS
srcディレクトリ
記事データはJavaScriptオブジェクトまたはMarkdown
デプロイはVercel

この構成なら、後から WordPress REST API 連携、MDX、CMS連携、SEO強化などを追加しやすくなります。

Step 1: Node.jsを準備する

Next.jsを使うには、まず Node.js が必要です。

Node.js は、JavaScript をブラウザ外で動かすための実行環境です。Next.js の開発サーバーを起動したり、パッケージをインストールしたりするために使います。

すでに Node.js が入っているか確認するには、ターミナルで以下を実行します。

bash

node -v

npm も確認します。

bash

npm -v

バージョンが表示されれば、Node.js と npm は使える状態です。

表示されない場合は、Node.js をインストールします。

開発環境では、Node.js のバージョン管理ツールを使うと便利です。たとえば、Mac や Linux では nvm を使う方法があります。

最初は細かい設定にこだわりすぎず、Next.js が動く Node.js 環境を準備することを優先します。

Step 2: create-next-appでプロジェクトを作成する

Next.js の新規プロジェクトは、create-next-app で作成できます。

ターミナルで、プロジェクトを作りたい場所に移動して、以下を実行します。

bash

npx create-next-app@latest my-next-site

実行すると、いくつか質問が表示されます。

最小構成としては、以下のように選ぶとよいです。

bashcreate-next-app の選択肢（最小構成）

Would you like to use TypeScript? No
Which linter would you like to use? ESLint
Would you like to use Tailwind CSS? Yes
Would you like your code inside a src/ directory? Yes
Would you like to use App Router? Yes
Would you like to customize the import alias? No

JavaScript で始めたい場合は、TypeScript を No にします。

ただし、長期運用するサイトやチーム開発を想定する場合は、TypeScript を Yes にしても問題ありません。

WordPress から Next.js へ移行する初期段階では、まず JavaScript で構成を理解し、その後 TypeScript 化する方法でも十分です。

Step 3: プロジェクトフォルダに移動する

プロジェクト作成が終わったら、作成されたフォルダに移動します。

bash

cd my-next-site

次に、開発サーバーを起動します。

bash

npm run dev

ブラウザで以下にアクセスします。

text

http://localhost:3000

Next.js の初期画面が表示されれば、初期構築は成功です。

ここまでで、Next.js の開発環境は動いています。

Step 4: 初期ファイル構成を確認する

create-next-app で作成したプロジェクトには、いくつかの重要なファイルとフォルダがあります。

src ディレクトリを使う構成にした場合、主な構成は以下です。

text初期ディレクトリ構造

my-next-site/
  public/
  src/
    app/
      layout.js
      page.js
      globals.css
  package.json
  next.config.js

それぞれの役割は以下です。

public

画像や静的ファイルを置く場所です。

src/app

App Router の中心になるフォルダです。ページやレイアウトをここで管理します。

src/app/page.js

トップページです。URLの / に対応します。

src/app/layout.js

サイト全体の共通レイアウトです。html、body、共通ナビ、共通フッターなどを管理できます。

src/app/globals.css

サイト全体のCSSです。Tailwind CSS を使う場合も、このファイルが基本になります。

package.json

使用しているパッケージや開発コマンドを管理します。

next.config.js

Next.js の設定ファイルです。画像ドメイン、リダイレクト、その他の設定を追加できます。

Next.js では、ファイルとフォルダの構成がルーティングに関係します。App Router では、app ディレクトリの中にフォルダを作り、その中に page.js を置くことでページを作成します。

Step 5: トップページを編集する

まず、src/app/page.js を開きます。

初期状態では、Next.js のサンプルコードが入っています。

これを一度シンプルな内容に変更します。

jsxsrc/app/page.js

export default function HomePage() {
  return (
    <main>
      <h1>My Next.js Site</h1>
      <p>Next.jsの初期構築が完了しました。</p>
    </main>
  );
}

保存すると、ブラウザの表示が自動で更新されます。

この時点で、Next.js のページ編集ができる状態になっています。

最初はデザインを作り込むよりも、「編集した内容が画面に反映されること」を確認するのが大切です。

Step 6: 共通レイアウトを整える

次に、src/app/layout.js を確認します。

layout.js は、サイト全体に共通するレイアウトを管理するファイルです。

例えば、以下のようにサイトタイトルや共通構造を設定できます。

jsxsrc/app/layout.js

import "./globals.css";

export const metadata = {
  title: "My Next.js Site",
  description: "Next.jsで作成したサイトです。",
};

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        <header>
          <p>My Next.js Site</p>
        </header>

        {children}

        <footer>
          <p>&copy; My Next.js Site</p>
        </footer>
      </body>
    </html>
  );
}

metadata では、サイト全体のタイトルや説明文を設定できます。

後から記事ページを作る場合は、記事ごとに個別の metadata を設定することもできます。

最初は、共通ヘッダー、本文エリア、共通フッターだけ作れば十分です。

Step 7: Tailwind CSSで最低限の見た目を整える

create-next-app で Tailwind CSS を有効にした場合、すぐに Tailwind のクラスを使えます。

例えば、トップページを以下のように変更します。

jsxsrc/app/page.js（Tailwind版）

export default function HomePage() {
  return (
    <main className="mx-auto max-w-5xl px-6 py-16">
      <h1 className="text-4xl font-bold tracking-tight">
        My Next.js Site
      </h1>
      <p className="mt-6 text-lg leading-8 text-gray-600">
        Next.jsの初期構築が完了しました。
      </p>
    </main>
  );
}

これだけで、余白、文字サイズ、本文幅を整えられます。

最初の段階では、細かいデザインシステムを作る必要はありません。

まずは以下だけ整えれば十分です。

最大幅
余白
見出しサイズ
本文サイズ
行間
リンク色
スマホ表示

後からコンポーネント化すればよいので、最初はページ内に直接クラスを書いても問題ありません。

Step 8: 新しいページを作成する

Next.js の App Router では、フォルダを作って page.js を置くと、新しいページになります。

例えば、about ページを作る場合は、以下のファイルを作ります。

text

src/app/about/page.js

中身は以下です。

jsxsrc/app/about/page.js

export default function AboutPage() {
  return (
    <main className="mx-auto max-w-5xl px-6 py-16">
      <h1 className="text-4xl font-bold">About</h1>
      <p className="mt-6 text-gray-600">
        このサイトについて紹介するページです。
      </p>
    </main>
  );
}

これで、以下のURLにアクセスできます。

text

http://localhost:3000/about

このように、Next.js ではフォルダ構成がそのまま URL になります。

例えば、以下のように作ると、

text

src/app/service/page.js
src/app/contact/page.js
src/app/blog/page.js

それぞれ以下の URL になります。

text

/service
/contact
/blog

Step 9: コンポーネントフォルダを作る

ページが増えてくると、ヘッダー、フッター、ボタン、カードなどを共通化したくなります。

その場合は、components フォルダを作ります。

おすすめの場所は以下です。

text

src/components/

例えば、Header コンポーネントを作る場合は、以下のファイルを作ります。

text

src/components/Header.js

中身は以下です。

jsxsrc/components/Header.js

import Link from "next/link";

export default function Header() {
  return (
    <header className="border-b">
      <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
        <Link href="/" className="font-bold">
          My Next.js Site
        </Link>

        <nav className="flex gap-6 text-sm">
          <Link href="/about">About</Link>
          <Link href="/blog">Blog</Link>
          <Link href="/contact">Contact</Link>
        </nav>
      </div>
    </header>
  );
}

作成した Header を layout.js で読み込みます。

jsxsrc/app/layout.js（Header導入版）

import "./globals.css";
import Header from "@/components/Header";

export const metadata = {
  title: "My Next.js Site",
  description: "Next.jsで作成したサイトです。",
};

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        <Header />
        {children}
      </body>
    </html>
  );
}

これで、全ページに共通ヘッダーを表示できます。

Step 10: 記事データ用のファイルを作る

Next.js で記事データを管理する場合、最初は JavaScript ファイルで記事一覧を持つ方法が簡単です。

例えば、以下のファイルを作ります。

text

src/data/articles.js

中身は以下です。

jssrc/data/articles.js

export const articles = [
  {
    title: "Next.js初期構築の最小手順",
    slug: "nextjs-initial-setup",
    content: `## Next.js初期構築で最初に決めること

Next.jsでサイトを作り始めるときは、最初に構成を複雑にしすぎないことが大切です。`,
  },
];

記事数が少ないうちは、この方法で十分です。

後から以下のような構成に拡張できます。

Markdownファイルで管理する
MDXで管理する
WordPress REST APIから取得する
Headless CMSから取得する
microCMSやContentfulなどを使う

最初から CMS 連携を作り込む必要はありません。

まずは Next.js 側で記事データを表示できる状態を作り、その後に WordPress や CMS と連携する方が安全です。

Step 11: 記事一覧ページを作る

記事データを作成したら、ブログ一覧ページで表示します。

以下のファイルを作ります。

text

src/app/blog/page.js

中身は以下です。

jsxsrc/app/blog/page.js

import Link from "next/link";
import { articles } from "@/data/articles";

export default function BlogPage() {
  return (
    <main className="mx-auto max-w-5xl px-6 py-16">
      <h1 className="text-4xl font-bold">Blog</h1>

      <div className="mt-10 grid gap-6">
        {articles.map((article) => (
          <article key={article.slug} className="rounded-lg border p-6">
            <h2 className="text-2xl font-semibold">
              <Link href={`/blog/${article.slug}`}>
                {article.title}
              </Link>
            </h2>
          </article>
        ))}
      </div>
    </main>
  );
}

これで、記事データからブログ一覧を表示できます。

Step 12: 記事詳細ページを作る

次に、記事詳細ページを作ります。

App Router では、動的ルートを使って記事ごとのページを作れます。

以下のファイルを作ります。

text

src/app/blog/[slug]/page.js

中身は以下です。

jsxsrc/app/blog/[slug]/page.js

import { articles } from "@/data/articles";

export default function ArticlePage({ params }) {
  const article = articles.find((item) => item.slug === params.slug);

  if (!article) {
    return (
      <main className="mx-auto max-w-5xl px-6 py-16">
        <h1 className="text-4xl font-bold">記事が見つかりません</h1>
      </main>
    );
  }

  return (
    <main className="mx-auto max-w-3xl px-6 py-16">
      <article>
        <h1 className="text-4xl font-bold">{article.title}</h1>
        <div className="mt-10 whitespace-pre-wrap leading-8">
          {article.content}
        </div>
      </article>
    </main>
  );
}

この状態では、Markdown を HTML として変換せず、テキストとして表示しています。

本格的に Markdown 表示をする場合は、react-markdown などを導入します。

最初の構築では、まず記事詳細ページまで動くことを優先します。

Step 13: Markdown表示を導入する

記事本文を Markdown として表示したい場合は、react-markdown を使うと簡単です。

インストールします。

bash

npm install react-markdown remark-gfm

記事詳細ページを以下のように変更します。

jsxsrc/app/blog/[slug]/page.js（Markdown対応版）

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { articles } from "@/data/articles";

export default function ArticlePage({ params }) {
  const article = articles.find((item) => item.slug === params.slug);

  if (!article) {
    return (
      <main className="mx-auto max-w-5xl px-6 py-16">
        <h1 className="text-4xl font-bold">記事が見つかりません</h1>
      </main>
    );
  }

  return (
    <main className="mx-auto max-w-3xl px-6 py-16">
      <article>
        <h1 className="text-4xl font-bold">{article.title}</h1>

        <div className="prose prose-lg mt-10 max-w-none">
          <ReactMarkdown remarkPlugins={[remarkGfm]}>
            {article.content}
          </ReactMarkdown>
        </div>
      </article>
    </main>
  );
}

Tailwind CSS で prose クラスを使う場合は、@tailwindcss/typography を追加すると便利です。

bash

npm install @tailwindcss/typography

記事サイトでは、本文の読みやすさが重要です。

最低限、見出し、本文、リスト、リンク、表、引用の見た目を整えましょう。

Step 14: 画像フォルダを準備する

Next.js で画像を使う場合、public フォルダに置くのが簡単です。

例えば、以下のように画像を置きます。

text

public/images/sample.jpg

ページ内では、以下のパスで参照できます。

jsx

<img src="/images/sample.jpg" alt="サンプル画像" />

Next.js の Image コンポーネントを使う場合は、以下のように書けます。

jsxnext/image を使う場合

import Image from "next/image";

export default function SampleImage() {
  return (
    <Image
      src="/images/sample.jpg"
      alt="サンプル画像"
      width={1200}
      height={800}
    />
  );
}

WordPress を Headless CMS として使う場合は、WordPress 側の画像 URL を Next.js で表示することもあります。

その場合は、next.config.js で外部画像ドメインを許可する必要があります。

Step 15: next.config.jsを確認する

next.config.js は、Next.js の設定ファイルです。

最初は何も変更しなくても動きます。

ただし、WordPress 画像や外部画像を使う場合は、画像ドメイン設定が必要です。

例えば、WordPress の画像が cms.example.com にある場合は、以下のように設定します。

jsnext.config.js

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "cms.example.com",
      },
    ],
  },
};

export default nextConfig;

設定を変更したら、開発サーバーを再起動します。

bash

npm run dev

最初の段階では、画像ドメイン設定、リダイレクト設定、環境変数の設定くらいを理解しておけば十分です。

Step 16: 環境変数を準備する

WordPress REST API や外部 CMS と連携する場合は、API の URL を環境変数にしておくと便利です。

プロジェクト直下に以下のファイルを作ります。

text

.env.local

中身は以下です。

text.env.local

NEXT_PUBLIC_SITE_URL=https://example.com
WORDPRESS_API_URL=https://cms.example.com/wp-json/wp/v2

Next.js 側では、以下のように使えます。

const apiUrl = process.env.WORDPRESS_API_URL;

注意点として、NEXT_PUBLIC_ で始まる環境変数はブラウザ側にも公開されます。

API の秘密鍵や認証情報は、NEXT_PUBLIC_ を付けずに管理します。

Step 17: buildで本番用チェックをする

開発中は npm run dev で確認します。

本番公開前には、必ず build を実行します。

bash

npm run build

エラーが出なければ、本番用にビルドできます。

その後、ローカルで本番環境に近い状態を確認するには、以下を実行します。

bash

npm run start

ただし、npm run start は事前に build が必要です。

開発中

bash

npm run dev

本番確認

bash

npm run build
npm run start

この違いを理解しておくと、デプロイ前のトラブルを減らせます。

Step 18: Gitで管理する

Next.js プロジェクトは、Git で管理するのがおすすめです。

初期化されていない場合は、以下を実行します。

bash

git init
git add .
git commit -m "Initial commit"

GitHub にリポジトリを作成し、コードを push します。

bash

git remote add origin https://github.com/your-name/my-next-site.git
git branch -M main
git push -u origin main

Vercel にデプロイする場合、GitHub と連携しておくと、main ブランチに push するだけで自動デプロイできます。

Step 19: Vercelにデプロイする

Next.js を最も簡単にデプロイする方法は、Vercel を使うことです。

基本的な流れは以下です。

GitHubにNext.jsプロジェクトをpushする
Vercelにログインする
New Projectを選ぶ
GitHubリポジトリを選択する
環境変数を設定する
Deployを実行する

Vercel は Next.js との相性がよく、App Router、画像最適化、ISR、環境変数などを扱いやすいです。

最初の段階では、Vercel にデプロイして公開URLで表示確認できれば十分です。

Step 20: 初期構築後に確認すること

Next.js の初期構築が終わったら、以下を確認します。

トップページが表示されるか
新規ページが表示されるか
ヘッダーのリンクが動くか
Tailwind CSSが反映されているか
記事一覧ページが表示されるか
記事詳細ページが表示されるか
Markdown本文が表示されるか
画像が表示されるか
npm run buildが成功するか
Vercelでデプロイできるか

このチェックが通れば、Next.js の最小構築は完了です。

ここから、必要に応じて以下を追加していきます。

SEO metadata
sitemap.xml
robots.txt
OGP画像
WordPress REST API連携
お問い合わせフォーム
カテゴリページ
タグページ
検索機能
関連記事
パンくずリスト
301リダイレクト

最初からすべて作る必要はありません。

まずは、ページが作れて、記事が表示できて、デプロイできる状態を作ることが大切です。

最小構成のおすすめディレクトリ

Next.js 初期構築では、以下のディレクトリ構成から始めると管理しやすいです。

text推奨ディレクトリ構成

src/
  app/
    blog/
      [slug]/
        page.js
      page.js
    about/
      page.js
    contact/
      page.js
    layout.js
    page.js
    globals.css
  components/
    Header.js
    Footer.js
  data/
    articles.js
public/
  images/

この構成なら、トップページ、固定ページ、記事一覧、記事詳細、共通コンポーネント、記事データ、画像を分かりやすく管理できます。

WordPress と連携する前の段階では、このくらいの構成で十分です。

JavaScriptで始める場合の考え方

Next.js は TypeScript で始めることもできますが、JavaScript でも問題なく構築できます。

特に、WordPress から Next.js へ移行する初期段階では、まず構造を理解することが重要です。

JavaScript で始めるメリットは以下です。

学習コストが低い
コード量が少ない
すぐに動かせる
WordPress API連携を試しやすい
記事データ管理を理解しやすい

一方で、記事数が増えたり、複数人で開発したり、データ構造が複雑になったりする場合は、TypeScript の方が安全です。

最初は JavaScript で作り、安定してから TypeScript 化する方法もあります。

初期構築でやりすぎないこと

Next.js の初期構築では、最初から多くの機能を入れすぎない方がよいです。

最初から入れすぎると、構成が複雑になり、どこでエラーが起きているのか分かりにくくなります。

最初にやらなくてよいことは以下です。

複雑なCMS連携
高度な検索機能
多言語化
会員機能
決済機能
複雑なアニメーション
大量のUIライブラリ導入
過剰なコンポーネント分割
完璧なデザインシステム

まずは、以下の3つを優先します。

1つ目は、ページが作れること。
2つ目は、記事データを表示できること。
3つ目は、デプロイできること。

この3つができれば、Next.js サイトの土台は完成です。

WordPress移行前の最小ゴール

WordPress から Next.js へ移行する場合、最初のゴールは「Next.js 側で記事を表示できる状態」を作ることです。

最初は WordPress API と連携しなくても構いません。

JavaScript の articles ファイルに仮の記事データを入れて、以下を確認します。

記事一覧が表示できる
記事詳細が表示できる
slugでページを分けられる
titleとcontentを表示できる
Markdown本文を表示できる
ページレイアウトが整っている

この状態ができてから、WordPress REST API と連携します。

いきなり WordPress API 連携まで進めると、Next.js の問題なのか、WordPress の問題なのか、API の問題なのか分かりにくくなります。

そのため、まずは Next.js 単体で動く構成を作るのがおすすめです。

まとめ

Next.js の初期構築では、最初から複雑な構成にせず、最小構成で動くサイトを作ることが重要です。

基本の流れは、Node.js を準備し、create-next-app でプロジェクトを作成し、App Router でページを作り、Tailwind CSS で最低限の見た目を整え、記事データを JavaScript ファイルで管理するという流れです。

最初に作るべきページは、トップページ、ブログ一覧ページ、記事詳細ページ、About ページ、Contact ページ程度で十分です。

記事データは、最初は src/data/articles.js に JavaScript オブジェクトとして置くと分かりやすいです。

その後、必要に応じて Markdown、MDX、WordPress REST API、Headless CMS へ拡張できます。

WordPress から Next.js へ移行する場合でも、いきなり WordPress 連携を作り込むのではなく、まず Next.js 単体で記事一覧と記事詳細が動く状態を作るのがおすすめです。

この土台ができれば、WordPress を Headless CMS として使う構成や、完全に Next.js で記事管理する構成にも発展させやすくなります。

Next.js初期構築の最小手順｜非エンジニアでもゼロから動かす20ステップ実装ガイド

Next.js初期構築で最初に決めること

Step 1: Node.jsを準備する

Step 2: create-next-appでプロジェクトを作成する

Step 3: プロジェクトフォルダに移動する

Step 4: 初期ファイル構成を確認する

public

src/app

src/app/page.js

src/app/layout.js

src/app/globals.css

package.json

next.config.js

Step 5: トップページを編集する

Step 6: 共通レイアウトを整える

Step 7: Tailwind CSSで最低限の見た目を整える

Step 8: 新しいページを作成する

Step 9: コンポーネントフォルダを作る

Step 10: 記事データ用のファイルを作る

Step 11: 記事一覧ページを作る

Step 12: 記事詳細ページを作る

Step 13: Markdown表示を導入する

Step 14: 画像フォルダを準備する

Step 15: next.config.jsを確認する

Step 16: 環境変数を準備する

Step 17: buildで本番用チェックをする

開発中

本番確認

Step 18: Gitで管理する

Step 19: Vercelにデプロイする

Step 20: 初期構築後に確認すること

最小構成のおすすめディレクトリ

JavaScriptで始める場合の考え方

初期構築でやりすぎないこと

WordPress移行前の最小ゴール

まとめ

続けて読む

ClaudeでNext.jsサイト構築する方法｜AI時代のWeb制作完全ガイド

AI時代のWeb設計チェックリスト｜AIにもユーザーにも選ばれるサイトの24項目

まずは、自社のWebの現在地を見てみませんか。