【新章開幕】Reactの次は Next.js！App Router という「最強の武器」を手に入れる100日間の旅、スタート。

新しい旅の始まりとして、Next.js 14/15（App Router）　の世界へ飛び込みましょう。React単体では難しかった「爆速な表示」と「高度なサーバー連携」を、Next.jsが魔法のように解決してくれます。

📝 1日目の学習ポイント：サーバーとクライアントの「対話」

Next.js App Router の最大の特徴は、コンポーネントを 「サーバーで動かすもの」 と 「ブラウザで動かすもの」 に明確に分ける（そして共存させる）点にあります。

💡 1. Server Components (RSC) とは？

これまでの React コンポーネントはすべてブラウザで動いていましたが、Next.js ではデフォルトが Server Components です。

• メリット: ブラウザに送る JavaScript が減り、読み込みが劇的に速くなる。

• できること: コンポーネントの中で直接 DB を叩いたり、秘匿情報を扱ったりできる。

💡 2. Client Components ('use client')

ボタンのクリックや useState などの「動き」が必要なときだけ、ファイルの先頭に 'use client' と書きます。

• 使い分け:

  • データの表示、SEO、重いロジック → Server

  • フォーム、クリックイベント、ブラウザAPIの使用 → Client

💡 3. 実践：最初のプロジェクト作成

まずはコマンド一つで、最新の環境を手に入れましょう。

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

• TypeScript: もちろん Yes（94日間鍛えた武器を使いましょう）

• Tailwind CSS: Yes（Next.jsとの相性は抜群です）

• App Router: Yes（これが現代のスタンダードです）

📝 1日目の課題

1. npx create-next-app でプロジェクトを作成し、npm run dev で起動してみる。

2. page.tsx の中身を書き換えて、サーバーコンポーネントから console.log("Hello Server") と書いてみる。

   • 💡 ヒント: ログはブラウザのコンソールではなく、ターミナルに表示されるはずです！

もっとNext.jsを学びたい人はここから！

#エンジニアと繋がりたい #Nextjs #100DaysOfCode #プログラミング学習 #新章スタート