Netlify 배포 후 새로고침하면 404 뜨는 이유? (네트리파이/SPA/Astro/Nuxt/React 1분 해결)
· 3 분 소요

Netlify 배포 후 새로고침하면 404 뜨는 이유? (네트리파이/SPA/Astro/Nuxt/React 1분 해결)

Netlify에 배포는 됐는데 /about 같은 페이지에서 새로고침하면 404가 뜨는 문제. 원인부터 _redirects, netlify.toml 설정까지 한 번에 정리.

Netlify 배포했는데 새로고침하면 404 뜨는 이유

네트리파이(Netlify)에 배포는 잘 됐는데, 이런 상황이면 거의 같은 원인입니다.

  • 메인(/)은 정상
  • 메뉴 클릭 이동(/about, /blog/1)도 정상
  • 그런데 새로고침(F5)만 하면 404 오류

이건 실수라기보다 SPA 라우팅 구조에서 흔하게 생기는 문제예요.
해결은 간단합니다.

결론: “SPA 라우팅”이라서 404가 뜹니다

한 줄로 정리하면 이렇습니다.

SPA 사이트는 새로고침 시 서버가 /about 같은 경로를 직접 처리하지 못해서 404가 뜹니다.

그래서 Netlify가 모든 경로를 index.html로 보내도록 설정하면 해결됩니다.

왜 클릭 이동은 되는데 새로고침만 404가 뜰까?

✅ 클릭 이동은 브라우저가 처리함

React/Vue/Nuxt(SPA)/Vite 같은 프로젝트는
페이지 이동을 서버가 아니라 브라우저(JS)가 라우팅합니다.

그래서 메뉴 클릭 이동은 정상입니다.

❌ 새로고침은 서버가 직접 처리함

새로고침을 하면 브라우저는 서버에 이렇게 요청합니다.

  • “/about 파일 주세요”
  • “/blog/1 파일 주세요”

Netlify 입장에서는 그 경로에 실제 파일이 없으면
그냥 404를 띄우는 게 정상 동작입니다.

해결 방법 1) public/_redirects 파일 (가장 쉬움 / 추천)

Netlify SPA 새로고침 404 해결은 사실상 이 방법이 정답입니다.

1) public/_redirects 파일 생성

프로젝트에 아래 파일을 추가하세요.

  • public/_redirects

2) 아래 한 줄 복붙

/*    /index.html   200

3) 커밋 → 푸시 → 재배포

이제 아래처럼 접속 후 새로고침해도 404가 안 뜹니다.

  • https://내도메인.com/about
  • https://내도메인.com/blog/1

해결 방법 2) netlify.toml로 해결 (설정 파일 관리형)

파일로 설정을 관리하고 싶다면 이 방식도 좋습니다.

1) 프로젝트 루트에 netlify.toml 생성

2) 아래 설정 추가

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

원리는 동일합니다.
어떤 경로로 들어오든 index.html을 반환해서 프론트 라우터가 처리하게 만드는 방식입니다.

React / Nuxt / Astro 케이스별로 자주 걸리는 포인트

React + react-router-dom (BrowserRouter)

React Router 자체 문제라기보다 배포 환경 라우팅 설정 문제입니다.
_redirects 또는 netlify.toml 설정으로 해결됩니다.

Nuxt인데도 새로고침 404가 뜨는 경우

Nuxt를 SPA 모드로 배포했다면 동일한 문제가 생길 수 있습니다.
이 경우도 똑같이 리다이렉트 설정으로 해결됩니다.

Astro인데도 새로고침 404가 뜨는 경우

Astro는 기본적으로 정적 페이지가 생성되지만,

  • 특정 페이지가 클라이언트 라우팅처럼 동작하거나
  • 빌드 결과물에 해당 경로의 HTML이 없으면

404가 날 수 있습니다.

이때도 _redirects 또는 netlify.toml로 해결 가능합니다.

적용했는데도 404가 계속 뜬다면 (체크리스트)

아래만 확인하면 대부분 해결됩니다.

1) _redirects 파일 위치가 맞나?

  • public/_redirects (추천)

dist/_redirects 같은 곳에 넣으면 빌드할 때 사라질 수 있습니다.

2) 파일명이 정확한가?

  • _redirects (확장자 없음)

_redirects.txt ❌

3) 배포가 실제로 다시 되었나?

Netlify Deploy 로그에서 최신 배포가 반영됐는지 확인하세요.

4) 캐시 문제인가?

  • 강력 새로고침: Ctrl + Shift + R
  • 또는 시크릿 모드로 접속

FAQ

Q1. 네트리파이(Netlify) 배포 후 새로고침하면 왜 404가 뜨나요?

새로고침은 서버가 /about 같은 경로 파일을 찾으려고 하기 때문입니다.
SPA는 그 경로에 실제 파일이 없어서 404가 납니다.

Q2. 네트리파이(Netlify) _redirects랑 netlify.toml 중 뭐가 더 좋아요?

둘 다 결과는 같습니다.

  • 빠르고 쉬운 건 public/_redirects
  • 설정을 파일로 관리하려면 netlify.toml

보통은 _redirects가 제일 간단합니다.

Q3. SEO에 안 좋지 않나요?

대부분의 SPA는 이 설정이 사실상 필수입니다.
SEO는 리다이렉트보다 콘텐츠/메타/색인 상태 영향이 더 큽니다.

Q4. Search Console에 404가 찍혔는데 괜찮나요?

과거에 크롤링된 기록일 수 있습니다.
지금 정상 동작하면 시간이 지나면서 점점 정리됩니다.

최종 요약 (이것만 기억하면 끝)

✅ 가장 빠른 해결법:
public/_redirects 파일 만들고 아래 한 줄 추가

/*    /index.html   200

Netlify 배포 후 새로고침 404는
이 한 줄로 대부분 해결됩니다.