Next.js

NextJS入門のためのあれこれ

簡単なサイトを作った際のメモなど。チュートリアルの他、冒頭では軽くnextjsの特徴についても触れています。

NextJSについて

React製のWebフロントエンドフレームワークです。

特徴

公式サイトを見てみるとわかりやすいかと思います。

img

コンセプトとしてはZeroConfigを標榜しており、動作させるにあたり細かな設定を必要としません。具体的には以下の特徴を持っています

  • 開発時のホットリロード
  • ファイルシステムルーティング(ファイルパスに対応する形でルーティングを自動でやってくれる)
  • 画像最適化
  • Typescript対応
  • SSR(後述)
備考: SSG(Static Generation) と サーバサイドレンダリング(SSR)の違い

SSRを用いることで何かしらのAPIを叩いてページを「動的に描画するみたいなことができるようになります。通常レンダリングとの簡単な比較として、大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しましたを参考に表にまとめました。

SSGSSR
ビルド時にHTMLを生成リクエスト毎にリクエストを生成
(相対的に)高速(相対的に)低速
静的(データはビルド時の状態)動的(データは最新の状態)
NextJSの基本

以降はチュートリアルをこなすにあたっての簡単なメモです。所感としては丁寧なチュートリアルだという印象を受けました。

クライアントサイドナビゲーション

aタグの代わりにLinkコンポーネントを使用する。Linkを使うことで自動的にルーティングしてくれます、楽ちんですね

import Link from 'next/link'

export default function LinkClassnameExample() {
  // To add attributes like className, target, rel, etc.
  // add them to the <a> tag, not to the <Link> tag.
  return (
    <Link href="/">
      <a className="foo" target="_blank" rel="noopener noreferrer">
        Hello World
      </a>
    </Link>
  )
}
機能実装

どんなプロジェクトでも必ず導入するであろう機能についてのみ手順を掲載しています。

GoogleAnalytics

TypeScriptに対応したGoogleAnalyticsの導入方法のメモです。

手順

GoogleAnalyticsのアップデートにより、導入がかなり簡単になりました。Googleで検索すると幾つか導入手順を解説した記事が出てきますが、その通りに行うと最近gtag.jsがアップデートされた関係でこちらの記事のようにイベントが二重送信されてしまうことになります。注意しましょう。

gtag.jsの導入

デフォルトのTypeScriptでgtag.jsは扱えません。まず初めに型定義をプロジェクトにインストールします。

npm install @types/gtag.js

2. 本番環境のみ適応される環境変数を定義する

プロジェクトにルートに.env.productionを作成します。NEXT_PUBLICが先頭につく変数は本番環境のみ公開される形で適応される環境変数となるようです。

NEXT_PUBLIC_GA_ID="ANALYTICS_ID"

3. gtagスクリプトを _document.tsxに挿入する

続いてgatagスクリプトの挿入を行います。共通のタグ構成を担うsrc/pages/_document.tsxに記述し、スクリプトはdangerouslySetInnerHTMLで渡します。手順1の実装でgaIDは本番環境の時だけ存在するようになっています。そしてそれを利用して本番環境のみスクリプトが挿入される実装をしています。

import React from 'react';

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    const gaID = process.env.NEXT_PUBLIC_GA_ID || ''
    return (
      <Html lang="ja">
        <Head>
          {gaID && (
            <>
              <script async src={`https://www.googletagmanager.com/gtag/js?id=${gaID}`} />
              <script
                dangerouslySetInnerHTML={{
                  __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gaID}', {
              page_path: window.location.pathname,
            });
        `,
                }}
              />
            </>
          )}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

以上です。従来はsrc/pages/_app.tsxにPV毎にイベントを発火させる必要がありましたが、こちらはアップデートにより不要になりました。

コメント

参考記事より引用

サイトマップ

サイトマップはライブラリを使って導入することにしました。選択肢は次の2つ

こちらの記事によると前者が推奨されていたのでそれに従うことにします。

手順

パッケージをプロジェクトにインストールします。

npm install next-sitemap

プロジェクトのルートディレクトリにnext-sitemap.jsを作成します。siteURLだけ変更すれば使えます。その他オプションはgithubのドキュメントを参照してください。

module.exports = {
    siteUrl: 'https://example.com',   
    generateRobotsTxt: true
}

最後にpackage.json"postbuild": "next-sitemap"を追記して終了です。

{
  "build": "next build",
  "postbuild": "next-sitemap"    //ココ
}
運用

Vercelでデプロイ

Vercelとは?

Nextjsの開発元が提供しているホスティングサービスです。NetlifyやGithubPagesが同じようなサービスとして挙げられます。ブログサイトのような簡単なアプリケーションであればこういったサービスの無料枠で十分事足ります。

参考サイト

Netlifyとの比較

ホスティングサービスの競合のNetlifyと比較する形で特徴を簡単に説明します。

所感

Netlifyと比較して、UIがとにかくシンプルで洗練されている印象です。そのため迷いません。個人的にはVercelの方が好みでした。誤解を招かないよう補足しますが、Netlifyが洗練されていないわけでは決してないです。むしろ十分シンプルで使いやすいと感じる部類です。

パフォーマンス

Vercelの方が高速です。Netlifyは日本リージョンがないため、かなり差が出ます。

無料のAnalytics・Integrationが秀逸

NetlifyのAnalyticsは有料に対し、VercelのAnalyticsは制限があるものの無料で使えます。あと見やすい。

vercel_analytics

またintegrationという機能を使うことで他のサービスと連携させることができます。例えばVercelのコンソール画面内でlighthouseの結果を閲覧したりすることが可能です。これも地味に便利だと思います。

Netlifyからの移管

VercelでNetlifyCMSを使う

githubのOAuthを用いて

参考を参考に行いました。

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから