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;
https://nextjs.org/learn/basics/styling-components/styling-our-home-page
<style jsx>{`
…
`}</style>
のような書き方をすることで、そのコンポーネント内でスタイルを適用できる。テンプレート文字列でCSSを渡すこと
https://nextjs.org/learn/basics/styling-components/no-effect-for-nested-components
ネストされたコンポーネントにはstyleは適用されないので、適用するstyleはそのコンポーネントで定義すること。https://github.com/zeit/styled-jsx#one-off-global-selectors global selectorというのもある。
https://nextjs.org/learn/basics/styling-components/global-styles
<style jsx global>を使うことで、globalにstyle適用することが出来る。外部からインストールしたコンポーネントにスタイルを当てたい時に便利(例えばreact-markdown)。
styled-jsxについて他いろいろは https://github.com/zeit/styled-jsx を見よう。
https://nextjs.org/learn/basics/deploying-a-nextjs-app/build-and-start next buildしてnext startすればサーバを立ち上げられる。本番ではこれを使う。
