Next.jsをはじめよう

Next.jsとは

Next.jsは、ReactをベースとしたWebアプリケーション開発フレームワーク（オープンソース）です。

Reactは、Webアプリケーションのフロントエンド開発において世界的に広く利用されている強力なUIライブラリです。Next.jsは、このReactの機能を拡張・強化する形で設計されています。
Reactが主にクライアントサイド（ブラウザ側）のUI構築に特化しているのに対し、Next.jsはサーバーサイドの機能も統合しており、フロントエンドからバックエンドまで一貫したWebアプリケーション開発を効率的に行うことができます。

当サイトの目的

このサイトは、私が Next.js を学んできた中で 「もっと早く知りたかった！」「ここが分かりにくかった」 と感じたポイントを、自分なりのメモとしてまとめ直したものです。

これから Next.js を触ってみようかな、と思っているみなさんの「最初の一歩」を少しでも軽くできればと思っています。

また、すでに学習を始めているものの、以下のような「あるある」な悩みで止まってしまっている方にも、何かのヒントになれば嬉しいです。

• ネットの記事と自分のコードが違っていて、どこが間違っているか分からない
• React と何が違うの？ SSR とか SSG って結局なに？
• コピペしてもエラーが出て動かない...
• SEO対策やメタタグの設定がなんだか複雑そう

Next.js は進化がとても早く、検索して出てくる情報がすでに古くなっていることもよくあります。私自身も「昔の記事を参考にしてハマってしまった」経験が何度もあります。

そこでこのメモでは、 「今、推奨されるモダンなやり方」 に絞って初学者の視点で、重要なポイントをわかりやすく紹介していくので、ぜひ参考にしてみてください。
具体的には、現在の主流である 「App Router」 という方式を前提に、私が実際に試して「これは便利だ！」と思った実装例を中心に紹介していきます。

最近のAIコーディングと学習のモチベーション

最近では、AIエージェントを活用したコーディングが主流になっているため、細かい仕様や文化を知らなくても誰もがスピーディにアプリを実装できる世界観に変わってきていますが、フレームワークの全体像や仕組みを知っている状態でコード生成に臨むのと、そうでないのとでは、生成物に対する姿勢が全く異なります。

例えばあなたがレストランのオーナーだとして、料理長がAIだと例えてみます。自分の全く知らない原材料・調理工程でAIがカレーをつくってくれたとします。美味しいうえに見た目も素晴らしいときていますが、中身は謎に包まれたままです。これをこのままお客さまに出せるでしょうか？AIコーディングでのアプリ作成も同じではないかと私は考えています。なぞのアプリをそのままお客さまに納品できるでしょうか、ということです。

料理の例えに戻ると、材料や基本的なレシピ、工程、完成品のイメージをAIに的確に指示し、AIは調理を爆速で仕上げてくれる。これなら安心して料理を提供できそうですよね。出来上がってきたものが想定外だった、あるいは、調理の途中で失敗したとしても、はじめに方針を与えたのはオーナーの自分ですから、失敗原因の把握と解決もスムーズになります。アプリ作成でいえば以下のイメージです。

• 材料＝言語（typescript, python, javaなど）
• レシピ＝フレームワーク（Next.js, React router, djangoなど）
• 工程＝こなしていくタスク（設計〜コーディング〜テストなど）
• 完成品＝アプリ

アプリ作りでも材料・レシピ・工程の基本知識は押さえておき、「AIをつかう」という姿勢を持ちたい、と私は考えています。

情報のアップデートが多くて大変な分野ですが、このメモがみなさんのスムーズな開発のお役に立てば幸いです。一緒に学んでいきましょう！

更新履歴

• 2025-01-04 : AIエージェントコーディングと本件学習のモチベーションについて追加しました。