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 next

Dockerコンテナにsharpをインストール

確認環境: Docker19.03.5 on RaspberryPi4

Next.jsのアップデートでconsoleエラーは解消されたが、今度はbuildの際に画像変換ライブラリのsharpがないとのエラーになってしまった。

Cannot find module 'sharp'

下記issueに記載されていた vips-dev をインストールしてみたもののエラーは変わらず。

Can't install vips 8.7.0 on Alpine 3.7 because of missing dependency pc:fftw3 · Issue #1142 · libvips/libvips

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上という特殊な環境だったため、ビルドが遅くエラー解消までにものすごく時間がかかってしまった。

参考


Related #next.js