この世の全てを自動化してぐうたら生活したすぎる

煩悩八百万クリエイター戦記

React

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

投稿日:

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

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

Next.jsのチュートリアル

https://nextjs.org/learn/basics/getting-started

ここからできる。やるには、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となって動いていくイメージ

f-arts336

f-arts336

-React
-

Copyright© 煩悩八百万クリエイター戦記 , 2018 All Rights Reserved.