nextjs

Next.jsを使ってSSRを始めよう【初心者向け】

Next.jsとは

Next.js(ネクストジェーエス)とはSSR(Server Side Rendering)をするアプリケーションのためのJavaScriptフレームワークです。

SSRの実装が簡単に行えるためSSRやりたいけど難しそう…という方にはオススメです。

Next.jsには以下のような特徴があります。

  • SSRがデフォルトで提供されている
  • ページ読み込みを早くするために自動でコードの分割を行う
  • シンプルなルーティングを実装できる
  • HMRをサポートする開発環境
  • ExpressなどのNode.jsのHTTPサーバーを実装できる
  • BabelやWebpackとカスタマイズ可能

SSR(Server Side Rendering)とは

Reactなどではブラウザなど(Client Side)でJavaScriptが動的にHTMLを生成していましたが、JavaScriptをサーバーサイドでも実行してどちらも共通のロジックでHTMLを生成しようというものです。

SSRには次のようなメリットがあります

  • SEO対策
  • First Viewのパフォーマンス向上

SEO対策

各種検索エンジンはクローラーと呼ばれるプログラムでwebページの情報を収集し、検索結果に出しているのですが、クライアントサイドのJavaScriptによって生成されるページであると正常に読み込むことができないためSEOの観点からするとあまりよくないことがありました。

しかし、SSRを行うことでクローラーに正しくコンテンツを読み取ってもらえるため、SEO対策としては有用なものとなります。

First Viewのパフォーマンス向上

SSR

CSR

(Walmart Labsより)

webサイトを開くとサーバーへリクエストが送られて、データが返ってきてそれをブラウザなどでレンダリングするわけですが、これだとブラウザでレンダリングが完了するまで最初のページは表示がされないため、ユーザーは不満を感じてしまう恐れがあります。

これに対しSSRはあらかじめサーバーサイドでレンダリングを行い、生成されたHTMLをブラウザに渡すため、ブラウザがデータを受け取った時にはすでに表示する準備ができているため、First Viewの表示が早く、UX的にも嬉しいです。

Next.jsの実装

Next.jsの概要やSSRについてわかってきたところで、いよいよ実装してみます。

Learning Next.jsに沿って解説していきます。

Node.js, npmが入っていない方はインストールしておいてください。

Reactに触れたことがない方はこちらの記事も見ておいたほうが良いかもしれません

Hello Next.js!

まずは簡単なページを表示してみます。

hello-nextというプロジェクトを作っていきます。ディレクトリを作成して各種パッケージを入れていきましょう。

$ mkdir hello-next
$ cd hello-next
$ npm init -y
$ npm install --save react react-dom next
$ mkdir pages

スクリプトを追加したいので、package.jsonを開いて以下のように追記します。

{
  "scripts": {
    "dev": "next"
  }
}

次に、最初のページを作っていきます。pages/index.js を開いてください

const Index = () => (
  <div> 
    <p>Hello Next.js</p>
  </div>
) 

export default Index

これでHello Next.jsを表示する準備はできました、以下のコマンドでdev serverを立ち上げて
http://localhost:3000へアクセスしてみてください!

$ npm run dev

もしエラーが出ていたりしても、ファイルを修正し保存すればページを再読み込みすることなく新しいページが表示されるはずです、これがHMR(Hot Module Replacement)の機能でNext.jsにはデフォルトで備わっています。

ページ間リンクの実装

簡単な画面表示はできたところで、次はリンクの実装を行っていきたいと思います。pages/about.jsに簡単なaboutページを作ってみましょう。

export default () => (
  <div>
    <p>This is the about page</p>
  </div> 
)

http://localhost:3000/aboutにアクセスすることでページが確認できると思います。

ページ間リンクはnext/linkというAPIを使って実装します。

pages/index.jsを次のように編集してください。

import Link from 'next/link' 

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div> 
) 

export default Index

IndexページのAbout PageをクリックするとAboutページへ移動するはずです。
また、戻るボタンを押すことでIndexページへも戻ることができると思います。これはnext/linklocation.historyも扱っているためです。

Linkは単なるWrapperコンポーネントであるので、スタイルをLinkに適用させることはできません、aタグなどの子要素につけましょう

// これはok
<Link href="/about">
  <a style={{ fontSize: 20 }}>About Page</a>
</Link>

// これはダメ
<Link href="/about" style={{ fontSize: 20 }}>
  <a>About Page</a> 
</Link>

また、onClickのpropを受け付けるコンポーネントであれば他のものでも大丈夫です

<Link href="/about"> 
  <button>Go to About Page</button>
</Link>

 

 

続きも随時追加する予定です