Next.js SSG빌드 & SSR 빌드

SSG, SSR 각각 빌드를 하기 위해 명령어를 나누어주도록 하겠습니다

1"scripts": {
2  "dev": "next dev",
3  "build": "next build",
4  "build:ssg": "next build && next export",
5  "start": "next start"
6},

이후 터미널에서 build 을 입력하면 SSR 빌드를, build:ssg 를 입력하면 SSG 빌드가 진행됩니다.

SSG 빌드 명령어를 입력하면, out 폴더가 생성되며, 해당 폴더 안에서 SSG 배포에 사용되는 폴더와 파일들(e.g. 404.html, boards.html)을 확인할 수 있습니다.

4.1 Trailing Slash

트레일링 슬래시는 URL 주소 끝에 붙은 슬래시 / 를 말합니다.

e.g.) https://www.google.co.kr/ 를 보시면 끝에 슬래시가 붙어있습니다.
사실 https://www.google.co.kr 이렇게 적어도 잘 동작하지만,
브라우저는 두 가지 경우를 다른 주소로 인식합니다.
주소 끝에 슬래시가 붙어있으면 이건 디렉토리, 즉 폴더라는 의미이고,
- 슬래시가 없다면 여기가 끝, 즉 파일이라는 것을 의미합니다.

Next.js의 기본 ssg build 옵션은

next.config.js 파일을 열어 trailing slash 옵션을 추가해줍니다.

1/** @type {import('next').NextConfig} */
2const nextConfig = {
3  reactStrictMode: true,
4  trailingSlash: true,
5}
6
7module.exports = nextConfig

그리고 나서 다시 yarn build:ssg 명령어를 실행하면 다음과 같이 build된 것을 확인하실 수 있습니다.