Next.jsのチュートリアルをやってみる

React

Reactを勉強していると、どうしてもクライアント側での描画という点でネックになることがあるようだ。例えば、SEO対策などはReactをそのまま使っている状態のクライアント側描画の場合は思ったとおりにならない事があるようです。（Googleのクロール時にキチンと描画出来ないことなどがある）

とりあえずポイントとしては、昨今ではSSR(Server Side Rendering)に対応する必要があるが、そのあたりをかなり使いやすくしてくれてるNext.jsがあるということ。勉強を兼ねて、Next.jsのチュートリアルをやってみた。

  1. Next.jsのチュートリアル
  2. チュートリアル内容について
  3. 今までやってたReactと変わりそうなところ

Next.jsのチュートリアル

Learn | Next.js
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and mor...
nextjs.org

ここからできる。やるには、GitHubアカウントでログインする必要がある。

 

チュートリアル内容について

  1. はじめに
  2. ページ遷移
  3. 共有コンポーネント（Header等）の利用
  4. 動的ページ（クエリ）の作成
  5. Route Maskingを使ったClean URLs
  6. Clean URLsをサーバーサイドで使う
  7. ページ用にデータ取得をする
  8. コンポーネントのStyle設定
  9. Next.jsアプリのデプロイ

API取得系もやってるのでわかりやすいとは思います。

今までやってたReactと変わりそうなところ

  • react-routerを使っていたところが、Next.js付属の「next/link」を使う形になりそう
  • Expressを使ったserver.jsを起点にする（今までは、index.jsが起点だった）
  • pagesフォルダ配下に、index.jsやabout.jsを作っていき、それぞれが/・/aboutのようなurlとなって動いていくイメージ

コメント