More than 3 years have passed since last update.

Next.jsAdvent Calendar 2020

@ymdarake(ym darake)

2020年末に入門するNext.js

Last updated at 2020-12-21Posted at 2020-12-21

この記事は、Next.js Advent Calendar 2020 の21日目の記事です。

はじめに

この記事では、Next.jsを全く触ったことがない & kszkなエンジニアが、公式チュートリアルに則ってNext.js製ブログをデプロイするまでの様子をお届けします。

想定する読者

ふだんVue.js/Nuxt.jsで事足りていて、Next.jsのチュートリアルを時間をかけて読むモチベがない方
毎月のように「来月はNextを勉強する」と言い続けて年末を迎えてしまった方（自分のこと）

（≒アドベントカレンダーを利用して自分のやるやる詐欺をついに実現しようという記事なので、同じような方のモチベになれば、くらいの軽い気持ちで書いています）

さっそく入門していく

さっそく、公式のチュートリアルを始めていきます。
CLIでプロジェクト作成するところからNext.js製のブログを世に送り出すところまでガイドしてくれるようです。実践的👏

1. プロジェクトを作成する

まずはコマンドでプロジェクトを生成します。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
cd nextjs-blog
npm run dev

これで、 http://localhost:3000 に素敵なページが出来上がりました！
これから素敵なブログに仕立てていきます。

ちなみに

"dependencies": {
    "next": "^10.0.0",
    "~その他省略~"
}

を使用しました。

2. ルーティング

Next.jsではpagesディレクトリ内の構造に従ってルーティングが行われます。
ページ間の遷移はLinkコンポーネントを用いるとのこと。router-link的な役割ですかね。

import Link from 'next/link'

// 中略

<h1 className="title">
  Read{' '}
  <Link href="/posts/first-post">
    <a>this page!</a>
  </Link>
</h1>

これでトップページと記事詳細ページを行き来できるようになりました。
毎回importしたりLinkとaタグを両方書かなきゃいけないのがちょっとダルいかなぁ。

3. 静的ファイル（画像、CSS etc...）とメタデータ

静的ファイルはpublicディレクトリに置くようです。いたって一般的。
HTMLのメタデータは<Head>コンポーネントに書いていく模様。

<Head>
    <title>First Post</title>
</Head>

次にCSSですが、ここではstyled-jsxというvercel謹製ライブラリを使用して、コンポーネントにスコープを限定した書き方とグローバルに適用される書き方が紹介されています。

このあたりは色々とやり方があると思うので、チュートリアル段階で深入りしなくても良さそうな気がします。
必要になったらググろうかな。
ということで、ガイドされるままにコピペしてブログのレイアウトを整えました。

4. Pre-renderingとData Fetching

ここがチュートリアルの肝だと感じました。
まずPre-renderingについてですが、公式の図表がとても分かりやすいです。
NextがコードをあらかじめHTMLに展開してくれるので、たとえブラウザのjsが無効になっていてもページが表示されます。
外野からすると、「Next.jsってSSRのフレームワークでしょ」というイメージだったので、いよいよ要点を解説するよ！という感じですね。

Pre-renderingには

Static Generation ... ビルド時にHTMLを生成する。
Server-Side Rendering ... リクエストごとにHTMLを生成する。

の2種類があり、ブログやドキュメントなど変更の少ないページはStatic Genして、それ以外はSSRしましょうとのこと。
Static Genする場合でも、ビルド時に必要なデータを取り込むことができて、
例えばブログの記事を外部から持ってくるには

export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData
    }
  }
}

とすれば解決する、と。
ページごとにStatic GenerationかSSRか選択できるようなので、ヘルプページとかはStatic Genしてサクッと返しましょう、という感じでしょうか。

クライアントサイドからデータを取りに行くならNext.jsチーム謹製ライブラリSWRを使ってねとのこと。
キャッシュの面倒を見てくれたりするみたいですが、標準的なライブラリなんでしょうか。

5. ダイナミックルーティング

ブログページのスタイリング、生成方法も分かったところで、次はダイナミックなルーティングについてです。
要するに、ブログの各記事へのルーティングを /posts/[id] にしたいよ！というやつです。
具体的には

/pages/posts/[id].js を作成
getStaticPaths() で、可能なidのリストを返す
getStaticProps({ params }) で、params.id をもとに必要なデータを取りに行く

で実現できました。シンプル！👏

記事を大量にGenしたい場合、ページネーションはどうするの？と思いましたが、getStaticPaths()でfallback: trueにすることで、新規にリクエストされたページをリクエストのタイミングでGenできるみたいです。
初回アクセスを踏んだ時にどれくらい待たされるか知りませんが、ブログとかヘルプとかなら許容範囲といったところでしょうか。

あとは、ver 9.5~ には Incremental Static Regeneration という機能もあるようです。
面白いですね！~~（適当）~~
ページ内の特定の箇所だけを更新したいときに使うんだ、みたいな話を聞いたことがあるような気がします。
いいね数とか、そういうやつですかね。Next仙人の方、教えて下さい。

どうやらNext.js = SSRのフレームワークな時代は過ぎ去っていたようです。¹

6. vercelを使ってデプロイ

ここまでの作業でブログは完成したので、あとはデプロイするのみです！
コードをGitHubに置いて、vercel(個人用の無料プラン)と連携させます。
特別な設定もいらず、「次へ」ボタンをぽちぽちしていくだけでデプロイされました🚀🚀
速い！👏

しかも、GitHub上でプルリクを作ると、あら不思議

vercel botがプレビュー用のURLを貼り付けてくれます。
えらい👏天才👏一生ついていきます🙌

vercelはチームで活用するには有料プランを使うしかないみたいですが、個人開発には十分すぎる機能なんじゃないでしょうか。
ちなみに、vercelを使うとSSR部分が独立したサーバーレスファンクションになったり、CDNをつけてくれたり、いたれりつくせりのようです。（さすがに制限があるかも。ちゃんと見てない。）

まとめ

Next.jsはSSRだけでなく、Static Generationでバシバシ高速化されたサイトを作る方向を向いているんだなぁという印象でした。
Next.js x vercel な開発は怠け者に優しいのもポイントが高いですね🥺👏
サクッとお試しで個人開発をするときは、この組み合わせでやってみようかなと思える便利さでした。

ちなみに、プロジェクト作成〜デプロイまでの時間は1h47mでした。
ドキュメントを丁寧に読みながらやったので、急げばお昼休み中に終えられるくらいのボリュームかもしれません。
2020年内のNext.js入門、まだ間に合います！

そういえば「Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな」という記事を流し読みしたことがありました。あとでちゃんと読み返そう。 ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up