[에러 해결] Next.js에서 새로고침 시 404: This page could not be found 발생 원인과 해결 방법

🚨 에러 종류

Next.js(SSR)에서 새로고침 시, 404 페이지로 자동 리다이렉션 되는 문제

404: This page could not be found

 

발생 환경

Next.js 13.5.4

 

원인과 해결 방법

원인은 Next.js가 기본적으로 후행에 슬래쉬를 제거하기 때문입니다.

이것을 트레일링 슬래시 (trailing slash) 라고 합니다.

Next.js 공식 문서

 

웹에서는 후행 슬래시가 붙어있다면 디렉토리로 인식합니다.

하지만 Next.js에서는 이 후행 슬래시를 자동으로 제거하며 해당 경로가 페이지라고 인식하는 것이죠.

 

저희 프로젝트에서는 후행 슬래시를 제거하여 리다이렉션할 필요가 없기 때문에, 공식 문서에서 설명하는 해결책을 적용했습니다.

PWA가 적용되어있는 파일이지만, 구조 자체는 동일합니다.

module 부분에 위 이미지에 있는 속성을 추가해주면 해결할 수 있습니다.

 

/** @type {import('next').NextConfig} */
const runtimeCaching = require('next-pwa/cache');
const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
  skipWaiting: true,
  runtimeCaching,
});

const nextConfig = withPWA({
  reactStrictMode: false,
  compiler: {
    emotion: true,
  },
  experimental: {
    forceSwcTransforms: true,
  },
  trailingSlash: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
});

module.exports = nextConfig;

 

후기

공식 문서 덕에 쉽게 해결할 수 있는 이슈였습니다.