next exportで書き出した静的サイトのconsoleに _next/data/xxx/.json 404エラーが出力される
Next.js 10 + Tailwind CSS 2.0 でAMP対応(hybrid)を行った。
この対応を行った後からChromeのDeveloperToolsを開くとconsoleに↓のエラーが出るようになってしまった。
_next/data/xxx/.json 404ローカル環境ではエラーは起きず、 next build && next export で本番環境用に静的書き出しを行った場合のみこのエラーが発生している。
画面の表示については問題なく表示されているが、consoleエラーがあるとLighthouseのスコアが下がってしまうので対処したい。
Linkのprefetchを無効化したり、 trailingSlash: false に切り替えてみたが変化なし。
利用しているNext.jsのバージョンがv10.0.3だったので、最新のv10.0.4にアップデートしたところ、謎の404エラーは表示されなくなった。
yarn add nextDockerコンテナにsharpをインストール
Next.jsのアップデートでconsoleエラーは解消されたが、今度はbuildの際に画像変換ライブラリのsharpがないとのエラーになってしまった。
Cannot find module 'sharp'下記issueに記載されていた vips-dev をインストールしてみたもののエラーは変わらず。
FROM node:12.14-alpine
RUN apk add vips-dev fftw-dev build-base --update-cache \
--repository https://alpine.global.ssl.fastly.net/alpine/edge/community/ \
--repository https://alpine.global.ssl.fastly.net/alpine/edge/mainコンテナのサイズは大きくなってしまうがalpineを止めて、通常のnodeイメージで試すことに。
libvips-dev をインストールしてみたがバージョン8.4.5がインストールされてしまうためsharpに必要なバージョンと合わず。
最終的に docker-builds/libvips-ubuntu18.04 を参考にソースからlibvipsをインストールすることにした。
FROM node:12.14
RUN apt-get update \
&& apt-get install -y
RUN apt-get install -y \
wget \
glib-2.0-dev \
libexpat-dev \
librsvg2-dev \
libpng-dev \
libgif-dev \
libjpeg-dev \
libexif-dev \
liblcms2-dev \
liborc-dev \
python3-pip \
time
ARG VIPS_VERSION=8.10.2
ARG VIPS_URL=https://github.com/libvips/libvips/releases/download
RUN wget ${VIPS_URL}/v${VIPS_VERSION}/vips-${VIPS_VERSION}.tar.gz \
&& tar xzf vips-${VIPS_VERSION}.tar.gz \
&& cd vips-${VIPS_VERSION} \
&& ./configure \
&& make \
&& make install \
&& ldconfig
WORKDIR /app
COPY package.json yarn.lock /app/
RUN yarn install
COPY . /app/
CMD [ "yarn", "dev" ]Next.jsを動かしているのがRaspberryPi4のDocker上という特殊な環境だったため、ビルドが遅くエラー解消までにものすごく時間がかかってしまった。