Next.jsチュートリアルやった

SPAをやるにあたって、Server Side Renderingの仕組みも知っておいたほうが良いと感じ、Next.jsについて学んでみた。チュートリアルがよく出来ていたので、これをベースに学んだ。

チュートリアルをやった感じ、Next.jsは以下のようなものがメインの機能のフレームワークだなと思った。使い方はシンプルだけど、面倒なことは結構やってくれて便利。

ファイルベースのルーティングをしてくれて
Server Side Renderingをしてくれて
いい感じにjsをchunkで分けてくれる
- しかもページに存在するLinkを見て、関係するsourceをprefetchしてくれたりする

これまでGraphQL/React/Next.jsと勉強してきたけど、ここまで手軽にSPA & Server Side Renderingが出来るなら、SEOとか関係するサイトでも全てSPAでいいなという気持ちになった。

チュートリアルメモ

特に重要なポイントとしては、

ファイルベースのルーティングの使い方
Linkの使い方
getInitialProps

あたりだろうか。

Learn - Getting Started | Next.js
- ファイルベースのルーティングである
https://nextjs.org/learn/basics/navigate-between-pages/hoc
- Link is Just a Higher Order Component (HOC)
https://nextjs.org/learn/basics/using-shared-components/rendering-children-components
- withLayoutのようなスタイル、よく使われていそう
useRouterで取れるものからクエリパラメータとかが取れる
- [id].jsのidとかも取れる
- router.query

[id].js的なファイルの場合、なんかこういう書き方でLinkしたほうがよい。

<Link href=“/p/[id]” as={`/p/${props.id}`}>

以下のようにするとサーバに直接アクセスしたことになってしまい(クライアントサイドでルーティングが存在しないとみなされる)、リダイレクトしているのと同じ挙動となり、全体がSSRされるので遅い。

<Link href={`/p/${props.id}`}>

https://nextjs.org/learn/basics/fetching-data-for-pages/finally

getInitialPropsを定義することで、サーバサイドレンダリング時はサーバで、クライアントサイドレンダリング時はクライアントでそれぞれ実行される。

const Post = props => (
  <Layout>
    <h1>{props.show.name}</h1>
    <p>{props.show.summary.replace(/<[/]?[pb]>/g, '')}</p>
    <img src={props.show.image.medium} />
  </Layout>
);

Post.getInitialProps = async function(context) {
  const { id } = context.query;
  const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
  const show = await res.json();

  console.log(`Fetched show: ${show.name}`);

  return { show };
};

export default Post;