はじめに
Next.jsはReactでサーバサイドレンダリングを可能とするフレームワークです。
同じような考えで開発されている、Vue.jsで作られているNuxt.jsも有名ですね。
balgeeではReactを実際に使ってサービスを作っていくシリーズもあります。
このシリーズではNext.jsの基本を解説しながら、実際にサンプルのWebサービスを作っていきます。
Next.jsとは
では、まずNext.jsとは何者なのかを解説していきます。
Next.jsはZEIT, Incにより開発されたフレームワークです。
ZEITは簡単にサービスをホスティング、デプロイできるNowというサービスを展開している会社です。
公式GitHubによると以下のように書いてあります。
Next.js is a minimalistic framework for server-rendered React applications.
簡単に言ってしまうと、Reactアプリケーションをサーバサイドレンダリングする為の軽量なフレームワークです。
サーバサイドレンダリングとは
JavaScriptは基本的にページのレンダリング（表示）時に実行されます。
その為、ページの大部分をJavaScriptに頼っていたり、ReactなどでSPA（Single Page Application）のような形態になっていると、そのページを初回に開くときに多く時間がかかってしまうようになります。
また、GoogleのクローラはJavaScriptを読み込み、その結果を評価することもできますが、それも100%ではありません。その為、コンテンツを全て伝えきれない（JavaScript側のレンダリングが全て終わっていない）状態でGoogleが評価する為、検索エンジンの評価として正しく評価されない可能性もあり、「SPAはSEOに弱い」と言われることもあります。
こういったSEOやパフォーマンスの観点から、ページをレンダリングする前にJavaScriptの処理をサーバ側で行ってしまい、ページをレンダリングすることをサーバサイドレンダリングと呼びます。つまりページをレンダリングするときには全てJavaScript側の処理が終わっている、ということですね。
環境構築
では、公式ページにそって環境構築をしていきましょう。
土台となるReactのアプリを作っていきます。
mkdir next-sample
cd next-sample
次にnpm moduleの初期化を行います。
npm init -y
そしてNext.jsをインストールします。
npm install --save next react react-dom
また、devでのコマンドで動かせるようにする為、以下をpackage.jsonに追加します。
{
"scripts": {
"dev": "next"
}
}
次に、Next.jsではpagesディレクトリ配下のファイルを使用していくので、pagesを作ります。
mkdir pages
また中にはindex.jsがあると、そちらがルートとして読み込まれますので、サンプルコードを書いていきます。
vi pages/index.js
export default () => <div>Welcome to next.js!</div>
単純にWelcomeメッセージを表示させています。
ここまでできたら動かしてみましょう。
npm run dev
こちらにアクセスします。
http://localhost:3000/
他のアプリケーションなどで使っていて他のポートを指定したい場合にはこのような形で任意のポートを指定してください。
npm run dev — -p port_num.
すると、このような画面になります。
これで一旦の環境構築は完了です！
まとめ
今回はサーバサイドレンダリングのお話や、Next.jsの簡単な概要、そして環境構築をしました。
次回以降で実際にロジックを組んでいきますのでお楽しみに！
