Web制作2026.05.31
Next.jsで個人サイトを作る初期設定｜App Router・TypeScript・Tailwind CSS
個人サイトをNext.jsで作り始めるための初期設定を、App Router、TypeScript、Tailwind CSS、静的出力まで整理します。
Next.jsで個人サイトを作る初期設定｜App Router・TypeScript・Tailwind CSS
個人サイト制作シリーズ この記事は「Next.jsで個人ブログ兼Webツールサイトを1から作る」連載の一部です。
初めての人でも順番に進められるよう、前提知識をできるだけ省き、つまずきやすいポイントもあわせて整理しています。
この記事では、個人サイトをNext.jsで作るための初期設定をまとめます。
対象は、以下のような人です。
- 自分のブログを作りたい
- Webツールも公開したい
- WordPressではなく自作したい
- でも、いきなり難しい構成にはしたくない
最初からフル装備にすると、サイト制作ではなく設定ファイル観察日記になります。まずは小さく、でも後から育てやすい構成にします。
プロジェクトを作成する
npx create-next-app@latest my-site
cd my-site
npm run dev
ブラウザで確認します。
http://localhost:3000/
表示されればスタート地点に立てました。まだゴールではありません。スタート地点です。ここ大事です。
おすすめのディレクトリ構成
app/
page.tsx
layout.tsx
globals.css
blog/
page.tsx
[slug]/
page.tsx
apps/
page.tsx
sample-tool/
page.tsx
about/
page.tsx
contact/
page.tsx
privacy-policy/
page.tsx
disclaimer/
page.tsx
not-found.tsx
components/
Header.tsx
Footer.tsx
Breadcrumbs.tsx
Pagination.tsx
PostListCard.tsx
content/
posts/
lib/
content.ts
public/
images/
app はページ、components は部品、content は記事、lib は処理、public は画像などを置く場所です。
静的サイトとして出力する
next.config.ts を設定します。
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
output: "export",
trailingSlash: true,
images: {
unoptimized: true,
},
};
export default nextConfig;
ポイントです。
output: "export" 静的HTMLとして出力する
trailingSlash: true URL末尾を / 付きにする
images.unoptimized 静的出力で画像を扱いやすくする
ビルドします。
npm run build
成功すると out フォルダが生成されます。
基本レイアウトを作る
components/Header.tsx の例です。
import Link from "next/link";
const navItems = [
{ label: "Home", href: "/" },
{ label: "Blog", href: "/blog/" },
{ label: "Apps", href: "/apps/" },
{ label: "About", href: "/about/" },
];
export function Header() {
return (
<header className="sticky top-0 z-50 border-b border-white/10 bg-slate-950/85 backdrop-blur-2xl">
<div className="mx-auto flex max-w-6xl flex-col gap-3 px-4 py-3 md:flex-row md:items-center md:justify-between">
<Link href="/" className="text-xl font-black text-white">
My Site
</Link>
<nav className="flex flex-wrap gap-2">
{navItems.map((item) => (
<Link key={item.href} href={item.href} className="rounded-full px-3 py-2 text-sm font-bold text-slate-300 hover:text-white">
{item.label}
</Link>
))}
</nav>
</div>
</header>
);
}
スマホでは横幅が足りないため、ヘッダーは flex-col で2段構成にしておくと安全です。
layout.tsxに組み込む
import type { Metadata } from "next";
import { Header } from "@/components/Header";
import { Footer } from "@/components/Footer";
import "./globals.css";
export const metadata: Metadata = {
title: {
default: "My Site",
template: "%s | My Site",
},
description: "個人ブログ兼Webツールサイトです。",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja">
<body className="bg-slate-950 text-slate-100 antialiased">
<Header />
{children}
<Footer />
</body>
</html>
);
}
最初に作るページ
まずは以下を作ると、サイトの骨格ができます。
app/page.tsx
app/blog/page.tsx
app/apps/page.tsx
app/about/page.tsx
最初は仮の内容で構いません。
export default function HomePage() {
return (
<main className="px-5 py-10">
<h1 className="text-4xl font-black">個人サイトを作っています</h1>
<p className="mt-4 text-slate-300">ブログとWebツールを置くサイトです。</p>
</main>
);
}
パスの注意点
trailingSlash: true の場合、内部リンクは末尾 / 付きに統一するときれいです。
<Link href="/blog/">Blog</Link>
まとめ
Next.jsで個人サイトを始めるときは、以下を整えます。
・create-next-appで作成
・App Routerを使う
・TypeScriptを使う
・Tailwind CSSを使う
・output: "export" を設定する
・基本ページを作る
・Header / Footer を共通化する
次の記事では、Markdownでブログ記事を管理する方法を扱います。