どうも、つよぽん(@tsuyopon_xyz)です！
こちらの記事では、次のようなことを知りたい方向けに書いております^^
こちらの記事を最後まで読むことで
- Reactの弱点を補うNext.jsの機能を知ることができる
- まずはおさえておきたい「Next.jsの代表的な機能3つ」がわかる
- Next.jsでTypeScriptの環境を構築するのが簡単であることがわかる
上記3つの項目はそれぞれ独立しているので、気になるところだけでも参考にしていただけたら幸いです^^
それでは早速見ていきましょう！
目次
Next.js&TypeScript体験シリーズの紹介
この記事は「Web白熱教室」で提供している学習コンテンツ「Next.js&TypeScript体験シリーズ」の1コンテンツである「【Next.js&TypeScript体験シリーズ】Next.jsとは」をまとめたものとなります。
学習コンテンツの方では「動画」「スライド」「参考資料のリンク」をまとめているので、
- 動画で学習したい
- スライドで学習したい
- 動画やスライド内で使っている参考リンクを確認したい
など、より詳細を学習したいといった場合は、ぜひ学習コンテンツのページの方も参考にしていただけたらと思います^^
Next.jsはReactの弱点を簡単に補える
ここで上げている「Reactの弱点」とは「SEO」を指しています。
この弱点はReactに限らず、Vueなども含めたクライアント側(Webブラウザ)だけでWebページを構築するDOM操作系のライブラリ全てに当てはまります。
ReactやVueだけだとどうして「SEO」に弱いかは、事例を挙げて解説したほうがイメージしやすいかなと思うので、Reactを使ってブログ記事を取得する流れを見てみましょう。
Reactでブログ記事を取得する際の流れ
前提として、ブログ記事の情報はAPI経由で取得するものだとします。
ページにアクセスしてブログ記事が表示されるまでの流れをざっくり洗い出すと次のような感じとなります。
- Webブラウザはブログ記事のページにアクセスする（サーバーにページリクエストを投げる）
- サーバーから返ってきたHTMLを元にWebページを構築する（このタイミングでは記事データは無い）
- HTML内のJavaScriptを読み込んで、記事データを取得するためにサーバーにAPIリクエストを投げる
- サーバーから記事データがWebブラウザに返ってくる
- 返ってきた記事データを元にDOM操作を行い、「記事タイトル」「記事本文」など記事情報をWebページに表示する
上記5つの流れの内、注目していただきたいのは②の段階でWebブラウザはHTMLをサーバーから受け取っているけれど、この時点では「記事データ」は持っていないという部分です。
つまり、②の時点でのHTMLの中身は「ブログ記事に関する情報が無い」ことを意味します。
極端に言ってしまえば、②の時点のHTMLは「ほとんど中身が空っぽ」ということを意味します。
SEO的な観点で見ると、「ほとんど中身が空っぽ」というのは「ユーザーの悩みを解決する情報が全く含まれていない」と捉えられるので、
Googleで検索結果で上位に来ることは「無い」といっても過言ではないと言えます。
Next.jsには「空っぽのHTMLを返さない仕組み」がある
「空っぽのHTMLを返さない仕組み」とは簡単に言ってしまえば、先程の①〜⑤の流れの②の時点で既に記事データが含まれているHTMLを返すことができる機能があるということです。
この機能に関しては、後述する「Next.jsの代表的な3つの機能」の中の「Server Side Rendering(SSR)」と「Static Site Generators(SSG)」でも解説しているので、そちらを参考にしていただけたらと思います。
Next.jsの代表的な3つの機能
ここで挙げる3つの機能は次のとおりです。
- Server Side Rendering(SSR)
- Static Site Generators(SSG)
- Routing
上記それぞれについてもう少し詳しくみていきましょう。
Server Side Rendering(SSR)
「Server Side Rendering(SSR)」とは、クライアントからサーバーにリクエストがあるたびに、Webページの表示に使用するHTMLのコードをサーバー側で生成する機能のことを指します。
サーバー側でHTMLを生成する際に「React」で実装したコードを元にHTMLを生成します。
イメージとしては「Ruby on Rails」「Laravel」など、バックエンドのWebフレームワークでよく見かける「MVC(Model, View, Controller)」のView部分の役割と同じことを行うのが「SSR」だと認識していただいても良いかなと思います。
「MVCって何？」という方向けに、「MVCの概念を理解する【Webフレームワークの基礎知識】」という記事を用意しているので、MVCを知りたい方はそちらも参考にしていただけたらと思います。
Server Side Rendering(SSR)に関しては、「【Next.js&TypeScript体験シリーズ】SSRの動作を確認する(Server Side Rendering)」という学習ページで「動画」「スライド」を使って解説しているので、そちらも参考にしていただけたらと思います。
Static Site Generators(SSG)
「Static Site Generators(SSG)」とは、事前にサーバー側で「ビルド」という操作を行い実装済みのReactコードを元にHTMLを生成する機能となります。
SSRと大きな違いは「HTML」を生成するタイミングにあります。
SSRとSSGのそれぞれのHTML生成のタイミングをざっくりと分けると以下のような感じです。
- SSRのHTML生成タイミング : クライアントからサーバーにページ取得のリクエストがある度に生成
- SSGのHTML生成タイミング : 事前にHTMLを生成して置いて、クライアントからサーバーにページ取得のリクエストが来たら、事前に生成しておいたHTMLを返す
Static Site Generators(SSG)に関しては、「【Next.js&TypeScript体験シリーズ】SSGの動作を確認する(Static Site Generators)」という学習ページで「動画」「スライド」を使って解説しているので、そちらも参考にしていただけたらと思います。
Routing
Routing(ルーティング)に関しては、Reactの既に使ったことがあるかたであれば「React Router」と同じような機能がNext.jsにデフォルトで備わっている認識していただければ問題ありません。
Next.jsの場合はReactの「フレームワーク」になるので、Routingを使うためには「Next.jsのRoutingルール」に従って記述する必要があります。
「Next.jsのRoutingルール」というと難しく聞こえるかもしれませんが、実際のところ全く難しいことはありません。
そのルールとは「pages」ディレクトリの中にページとして表示するJavaScriptファイル、もしくはTypeScriptファイルを記述するだけです。
例えば、「https://〇〇.com/about」のURLに対応するページを作りたいと思ったら、
- pages/about.jsx
- pages/about.jsx
- pages/about.tsx
のようなファイルを作れば良いだけです。(「tsx」という拡張子は「jsx」のTypeScript版となります。)
詳しくはNext.jsのドキュメントの「Routing」の項目を確認することで、Next.jsのRoutingの使い方のイメージがすぐに掴めるかと思います。
Next.jsでTypeScript環境を構築するのは簡単
Next.jsでTypeScriptを動かす環境を作りたい場合は、Next.jsのドキュメントの「TypeScript」を読むのが一番手っ取り早く簡単にできます。
流れを簡単にまとめると以下の2段階だけとなります。
- プロジェクトのルートディレクトリに「tsconfig.json」ファイルを作成する
- npmもしくはyarnで「typescript」「@types/react」「@types/node」をインストールする
①で作成した「tsconfig.json」の中身は空のままで構いません。
①と②が完了した時点でNext.jsのサーバーを起動すると、中身が空の「tsconfig.json」に勝手に必要な設定情報が記述されます。
文章だけだとイメージが付きづらい場合は「【Next.js&TypeScript体験シリーズ】Next.jsとは」の解説動画の15分11秒からTypeScript環境の構築の手順を解説しているので、動画でイメージを掴んでいただけたらと思います。
まとめ
今回の内容をまとめると以下の通りでした。
- Next.jsを使うことで、Reactの弱いSEO部分を簡単に解決できる
- Next.jsで最初におさえておきたい3つの機能は「Server Side Rendering(SSR)」「Static Site Generators(SSG)」「Routing」
- Next.jsでTypeScriptの環境を整えるには「tsconfig.json」ファイルを作り、必要なパッケージをインストールするだけ（設定の記述の必要は無い）
既にReactを触ったことある方であれば、そこまで学習ハードルは高くないかと思います。
さらにReactの弱点である「SEO」周りも特に苦労することなく解決できるので、Reactにある程度なれてきたらNext.jsにもぜひチャレンジすることをオススメします^^
参考リンク集
- Web白熱教室
- Next.js
LINE登録で無料特典を受け取る
次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。
- Webエンジニアになりたいけど何から学習を始めれば良いかわからない
- 今まで独学で頑張ってきたけど、独学に限界を感じてきた
- プログラミングは出来るけど、大きめのコードが書けない
「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。
