GithubPagesでシングルページデザインのサイトを公開する方法 #GitHub

概要

NextJsで作ったサイトをGithub-Pagesで公開していて
それをシングルページデザインに変更したところインデックスページ以外へのリンクで404発生

静的に置かれているだけなのでそりゃそうか、となる

ちょっと乱暴だけどカスタム404からNextRouteでasPathからreplaceし直して404を回避した

Github pages で以下の自社サイトを公開しています。

このサイトはNextJSで作っており、最初に30分くらいで作った時にはシングルページ・デザインではなくページが分かれていました。

　# 以前のコード配置
/pages
  ./index.tsx
  ./company.tsx
  ./house.tsx
   ︙

この場合、ビルド結果は

index.html
company.html
house.html
   ︙

を生成・配置してくれるので、外部からhttps://www.aya-eiya.work/companyのようなリンクを貼っても正常に表示できます。

シングルページデザインにする場合、方法はいくつかありますが今回とった方法ではページ内で/から/companyに移動するさいのリロードを回避するためreouter.push(string,params,{shallow:true})を使うことにしました。

{shallow:true}はpushしてページを移動する際に、NextJSの同一パス内ではリロードをせずにURLを変更できる仕様です。

"同一パス内"を実現するため、ページの配置を以下にします。

/pages
  ./index.tsx  (シングルページデザインに変更、また静的配置のインデックスになるので必須)
  ./[pages].tsx (中身はindex.tsxのコンポーネントを返すコンポーネント)

こうしたことで、ビルド後で静的に配置されるHTMLは以下となります。

./index.html
./[pages].html

この場合に、外部からhttps://www.aya-eiya.work/companyのようなリンクを貼ってしまうと、静的に置かれたファイルしか見てくれないので404が発生します。

これは困った。

ところがGithub pagesでは404にはNextJSの404ページを採用してくれるので、404でもNextJSが動いているページを表示してくれます。

いったんNextJSが動けば、NextJSのルーター機能でパスを解決すれば表示できるので

const {path,asPath,replace} = useRouter()
useEffect(() => {
  if(path != asPath) {
     replace(asPath)
  }
},[path,asPath,replace])

のようにして、パスをNextJSに解決してもらうことができました。

一瞬404になってちらつきますが、気にしない人は気にしないので簡単なサイトを公開する時には使えるテクニックかもしれません。