この記事は、ラクスパートナーズ AdventCalendar 2025の19日目の記事です。
（個人で25日連続投稿にチャレンジ中のカレンダーになります）
今回はNext.jsの特徴について大まかに振り返っていきたいと思います。
Next.jsとは？
一言で言うと、Reactのフレームワークです。
こちらの記事でも振り返ったように、ReactはUIの管理に特化したライブラリとなります。
そんなReactをベースに、より便利に開発できるようにしたフレームワークがNext.jsとなります。
特徴
自動でルーティングしてくれる
ディレクトリの構造とファイル名を元に自動でルーティングを定義してくれるので、ページ遷移を簡単に実装できます。
(ReactではReact Routerを使用していましたが、Next.jsでは不要です)
appディレクトリ以下にpage.tsxを作成してexportすると、ページとしてアクセスできるようになります。
(layouts.tsxはページのレイアウトを定義するファイルとなります)
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>
{children}
</body>
</html>
)
}
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
上記のファイルを用意してnpm run devでローカルサーバーを起動します。
その後localhost:3000（/）にアクセスすると、以下のようなページが表示されます。
別のページへ遷移するには、Linkコンポーネントを使用します。
/blogに遷移したい場合は、まずapp/blog/page.tsxを作成します。
app
┗ page.tsx
┗ blog
┗ page.tsx
次に、app/app.tsxでLinkコンポーネントを使用します。
import Link from "next/link";
export default function Page() {
return (
<>
<h1>Hello, Next.js!</h1>
<Link href="/blog">Blogページへ</Link>
</>
)
}
このように<Link href="パス">テキスト</Link>の形式で書くことにより、指定したパスに遷移できるリンクを作ることができます。
動的ルーティング
/blogをブログ一覧ページとし、そこからさらにブログ詳細ページを作りたい場合は、
/blog/[id]/page.tsxを作成します。
app
┗ page.tsx
┗ blog
┗ page.tsx
┗ [id]
┗ page.tsx
次に、Linkコンポーネントのhref属性部分を<Link href={`/blog/${post.id}`}>のように指定します。
こうすることで、/blog/指定したidのページに遷移することができます。
import Link from "next/link";
type Post = {
id: string;
title: string;
date: string;
};
const posts: Post[] = [
{
id: "id1",
title: "初投稿",
date: "2025-12-01",
},
{
id: "id2",
title: "Reactについて",
date: "2025-12-10",
},
{
id: "id3",
title: "Next.jsについて",
date: "2025-12-15",
},
];
export default function Page() {
return (
<>
<h1 className="text-3xl font-bold mb-4">ブログ一覧</h1>
<ul className="space-y-6">
{posts.map((post) => (
<li
key={post.id}
className="border rounded-lg p-4 hover:shadow-md transition-shadow"
>
<Link href={`/blog/${post.id}`} className="text-xl font-semibold">
{post.title}
</Link>
<div className="text-sm text-gray-600">{post.date}</div>
</li>
))}
</ul>
</>
);
}
layout
app/layoutは、プロジェクト内の最上位のレイアウトです。<html>要素や<body>要素、同じ階層以下の全てのページに適用されるレイアウトを定義できます。
以下の例では、Headerコンポーネントを共通のレイアウトとして表示できます。
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>
<Header />
{children}
</body>
</html>
)
}
静的アセットはpublicに設置
画像やフォントなどの静的アセットはpublicディレクトリに設置します。
public/profile.pngを置いている場合は、/profile.pngで参照できます。
import Image from 'next/image'
export default function Page() {
return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}
SSR、SSG、ISRを簡単に実装できる
CSR（クライアントサイドレンダリング）はもちろんのこと、
- SSR（サーバーサイドレンダリング）
- SSG、（静的サイトジェネレーション）
- ISR（増分静的再生）
の3点についても簡単に実装できます。
この3点を使い分けることで、表示速度が高速、かつSEOに強いプロジェクトを開発できるのがNext.jsの特徴です。
SSR、 SSG、ISRの詳細については以下の記事にまとめております。
Next.jsでSSG、SSR、ISRを実装するには、Route Segment Configという機能を使用します。
（ご紹介するのはNext.js v13から追加されたApp Routerの場合となります）
SSGの実装方法
layout.tsxやpage.tsxにdynamicというオプションを追加することで、そのページの動作を指定することができます。
export const dynamic = 'force-static'
を指定することで、指定されたページはSSGと同じ挙動をします（ビルド時に静的なHTMLを生成する）。
SSRの実装方法
export const dynamic = 'force-dynamic'
を指定することで、指定されたページはSSRと同じ挙動をします(リクエストのたびに、サーバー側で最新のデータを反映したHTMLを生成)
ISRの実装方法
layout.tsxやpage.tsxにrevalidateというオプションを指定します。
export const revalidate = 10;
このように数値を指定すると、指定した秒数後にHTMLの再生成を行います。
また、デフォルトの値はfalseです。
export const revalidate = false;
この場合は、キャッシュされたHTMLを返すため、SSGと同じ挙動になります。
export const revalidate = 0;
のように0を指定した場合、SSRと同じ挙動になります。
autoの場合
ちなみに、dynamicはデフォルトの値がautoになっています（明示的にdynamicを指定していないlayout.tsxやpage.tsxは、自動的にautoが適用される）。
export const dynamic = 'auto';
こちらを指定した場合は、fetchのオプションに何を指定するかによって挙動が変わるようでして、
-
cache: 'force-cache'を指定するとSSGのような挙動 -
cache: 'no-store'を指定するとSSRのような挙動
となります（ちょっと確証がないので、ご存じの方いらっしゃればコメントいただけると嬉しいです）。
Vercelを使って簡単にデプロイ
Vercelというクラウドサービスを使うことで、簡単な操作でプロジェクトを即座に公開することができます。
※ こちらについては別記事でご紹介したいと思います。
以上となります。
私自身、Next.jsは数年前（まだPage Routerだった頃）に勉強して以来でした。最近久々に触る機会があったので再び勉強しているのですが、App Routerなどの新機能がかなり追加されていて焦りました。
一旦開発でよく触りそうな機能や特徴を大まかにまとめてみましたが、誤っている箇所や補足などあればコメントいただけますと幸いです。
ここまで読んでいただき、ありがとうございました。
参考
参考にさせていただいた記事です。
ありがとうございました🙇♂️