カテゴリー: Next.js

Recoil を使ったプロジェクトをNext.js に移行しようとしたところ以下のようなエラーが出てしましました。

TypeError: Cannot destructure property 'ReactCurrentDispatcher' of 'react__WEBPACK_IMPORTED_MODULE_0___default(...).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined.

この記事はこれを解決するための記事です。

やり方

ページまたはコンポーネントごと、SSRをオフにする。

今までRecoilを使っていたページを下記のようにラップしてしまいます。

私の場合の例を出しますと。元々はdiagnosis.tsx にrecoil を含む動作を書いていたたのですが、
pages/diagnosis.tsx を直接書くのではなく、diagnosis.page.tsx に全てコードを移行し、
diagnosis.tsx の中で動的にインポートしました。

// pages/diagnosis.tsx
import dynamic from 'next/dynamic';

// diagnosis.page.tsx をクライアントサイドのみで読み込む
const DiagnosisPageComponent = dynamic(() => import('../diagnosis.page'), {
  ssr: false,
});

export default function DiagnosisPage() {
  return <DiagnosisPageComponent />;
}

元々のRecoilを含むコード

diagnosis.page.tsx には実際の実装（Recoil フックを呼び出す部分）を記述します。こうすると、サーバーサイドでは空っぽのコンポーネントしか返さないため、エラーを回避できました。

React と ReactDOM のバージョンを一致させる

以上で解決できない場合はReact と ReactDOM のバージョンを見直してみてください。どちらも同じバージョン出ないと不具合が出る場合があります。

SEO対策のためにSSGを導入しようと思い、その方法をいかにメモしました。
よければ読んでいってください！

SSGとは？

SSG（Static Site Generation）は、Next.js の データ取得（データフェッチ）戦略の1つで、ビルド時に HTML ファイルを生成し、それを配信する仕組みです。

手順

next.config.js の設定

以下のコードでnext.js は next export を実行すると、静的HTML/CSS/JS ファイルを生成します。

module.exports = {
  output: "export", // 静的サイト (SSG) を生成する
  trailingSlash: true, // 各ページに `/` をつける (オプション)
};

パッケージのインストール

yarn install  # または npm install

yarn global add serve  # または npm install -g serve

next.js のビルドと静的ファイル生成

yarn build  # または npm run build
yarn export # または npm run export

serve で out/ フォルダをホスト

serve out

成功すると以下のような画面になります。