Next.jsでリロードすると404が出る時の対処法

Next.jsでリロードすると404が出る時の対処法

next.jsでexport（SSG）して、hostingしていざサービスを使ってみると、 リンクからたどる際は普通に動くのに、リロードするとなぜか404になる。。。 そんな時の対処方を紹介します。

next.config.jsというファイルを開き下記のようにtrailingSlash:trueにするだけで、 リロードしても404が出ずに想定通りにコンテンツが表示されるようになります。

module.exports = {
  trailingSlash: true,
}

参考: next.config.js/trailing-slash

おまけ

React CarouselでDotsを使う場合は、下記の通りにやると、 Dotsも簡単に使えます。

import dynamic from 'next/dynamic';
import '@brainhubeu/react-carousel/lib/style.css';
const Carousel = dynamic(() => import('@brainhubeu/react-carousel'), {
  ssr: false,
});
import { Dots } from '@brainhubeu/react-carousel';
import { useState } from 'react';

const Home = () => {
  const [value, setValue] = useState(0);
  return (
    <>
    <Carousel plugins={['arrows']} value={value} onChange={(value) => setValue(value)}>
      <img src="https://images.unsplash.com/photo-1612565191576-7ac513f0fc00?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
      <img src="https://images.unsplash.com/photo-1622367037544-fbf8987e2e07?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />
    </Carousel>

    <Dots
      value={value}
      onChange={(value) => setValue(value)}
      thumbnails={[
        (<img key={1} className="img-example-small" src="https://images.unsplash.com/photo-1612565191576-7ac513f0fc00?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />),
        (<img key={2} className="img-example-small" src="https://images.unsplash.com/photo-1622367037544-fbf8987e2e07?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" />),
      ]}
      />
    </>
  )
}

export default Home