Next.js

Next.js 15入門：App Routerで始めるモダンWeb開発

Next.js 15のApp Routerを使ったモダンなWeb開発の始め方を解説します。Server ComponentsやData Fetchingの新しいパターンを学びましょう。

2026年3月15日·ウェブタク

Next.js 15はReact 19との統合が強化され、Server Actionsがさらに使いやすくなりました。

App Routerとは

App RouterはNext.js 13で導入されたファイルシステムベースのルーティングシステムです。layout.tsx、page.tsx、loading.tsxなどの規約ファイルを使って、直感的にUIを構築できます。

// app/page.tsx
export default async function HomePage() {
  const posts = await getPosts();

  return (
    <main>
      <h1>ブログ記事一覧</h1>
      {posts.map((post) => (
        <article key={post._id}>
          <h2>{post.title}</h2>
        </article>
      ))}
    </main>
  );
}

ウ

ウェブタク

フロントエンドエンジニア。Next.jsとTypeScriptが好き。

記事一覧に戻る