Nextjsのチュートリアルのまとめ

dev.toなどの早いサイトはサーバーサイドレンダリングを行ってるということで、Nextjsのチュートリアルをやった。以下はそのまとめ。

getInitialProps

  • サーバーサイドとクライアントサイドのどちらかで実行されるgetInitialPropsという関数がある。
  • この関数はコンポーネントがロードされる環境で実行される。ユーザーがサーバーに訪れたときはサーバー側で、ページ内の遷移ではクライアント側で実行される。
  • チュートリアルではどちらの環境からでもHTTPリクエストを送れるisomorphic-unfetchでデータを取得してた。
  • 本番と開発環境でURLが違うときなどどちらの環境でも動くコードにしないといけないから、そこは調べないといけない。

スタイル

  • スタイルをstyled-jsというコードの中に書く手法が初めてだった。
  • 自分はこの手法はあまりよくないんじゃないかとなんとなく感じるから、このページからいい方法を探したい(https://github.com/zeit/next.js#css-in-js)

ルーティング

  • Pagesフォルダーの中にファイルを作ればそのままルートになるのがわかりやすい。
  • 階層が増えたときはどうしたらいいのだろう。
  • カスタムルーティングはroutes.jsというファイルを作り、以下のようにしてみた。
// routes.js
module.exports = (app, server) => {
  server.get('/p/:id', (req, res) => {
    const actualPage = '/post';
    const queryParams = {id: req.params.id};
    app.render(req, res, actualPage, queryParams);
  });
}

// server.js
require('./routes')(app, server);

server.get('*', (req, res) => {
  return handle(req, res);
});

server.listen(3000, (err) => {
  if (err) throw err;
  console.log('> Ready on http://localhost:3000');
})

デプロイ

async

  • 始めてasyncを使ってみた。以下のコードのようになる
const res = await fetch('https://api.tvmaze.com/search/shows?q=batman');
const data = await res.json();
  • シンプルでコードが見やすくなる
  • エラー処理などを調べたい

わからないこと

  • NODE_ENV=productionpackage.jsonに書いたけど、ほかの環境変数はどこに設定するのだろう
  • Typescriptとの共有はできる?
  • アクセスガード
  • Reactコンポーネントとどうやって組み合わせるのか(これはおそらくそのまま使えそうだが、チュートリアルでは一度も触れられてなかった)

ルーティングが簡単にできるのがいい。
まだまだいろいろできそうだから、階層が深くなったときのルーティング、Reactコンポーネントとの共有、Typescriptとの共有、Auth guardなどまだまだわからないことが多いからYoutubeのチュートリアルなどをいくつかチェックしたい。