🔥

Next.jsのチュートリアルやったのでふりかえる

2023/12/15に公開

Next.js

React

frontend

tech

Next.jsを全然触ったことなかったので、　Next.js Foundations Courseをざっとやってみた。
全体把握にとてもいい感じだったので、良かったところや内容を振り返ってみる。

注意

終わってから気づいたけど、別のチュートリアルもあった。

こっちの方が新しいっぽいのでこれからやるならこちらの方が良さそう😭

良かったところ

ざっくりNext.jsの全体感把握できた
ごくシンプルなアプリを実際に作りながら学べた
Vercelにすごく楽にデプロイできることを知れた
（私はやってないけど）React自体とか、SEO対策の章もあるので、実用的かつReact初心者でも着手できそう

内容振り返り

Create a Next.js App
- npx create-next-app@latest <アプリ名>でプロジェクト作れる
Navigate Between Pages
- pagesディレクトリ下にコンポーネントを置くことで、そのディレクトリ構造そのままのルーティングが設定される
  - これはもう古いみたい。今は基本的にappディレクトリの下に入れていく。
- Linkコンポーネントを使うことでclient-side navigationが有効となり、他のページへのリンク時にサーバーへのリクエストが飛ばなくなる
  - Linkで紐づけられてるページは最初のリクエスト時にプリフェッチされる
Assets, Metadata, and CSS
- pages/_app.js内でcssファイルをインポートすることで、それがグローバルスタイルとして設定される
Pre-rendering and Data Fetching
- リクエストのたびにサーバーサイドでレンダリングするSSRと、build時に一度だけレンダリングしてあとは使い回すSSGがある。カスタムフックで使い分ける。
- ビルド時に外部APIやDBからフェッチしてSSGも可能（この場合の静的ページのライフサイクルがまだよくわかってない。CMS使う場合も、コンテンツ追加時には再ビルドが必要？）
- レンダリング後、インタラクティブな動作を可能にする段階はクライアントサイドで行う。これをhydrationと呼ぶ（ふやかして柔らかくするみたいなニュアンスなのかな？）
Dynamic Routes
- pages/[id].jsxみたいに[]を使ったファイル名にすると、動的なルーティングが可能（ブログ記事ページなどで使える）
API Routes
- pages/api/*.js内でhandler関数を定義するとAPIが作れる
  -　Deploying Your Next.js App
  -　GitHub上のリポジトリ指定するだけでVercelにデプロイできる
  -　レビューしやすそう・・・

感想

Next.js自体が思ってた以上に良さそうだなと感じた。
チュートリアルもコンパクトにまとまってて助かる。
あとVercelデプロイ簡単すぎる・・・良い・・・・
まだまだ把握できてない機能とかもあると思うが使いながら慣れていきたい。

注意

良かったところ

内容振り返り

感想

Discussion