Next.js 정적 내보내기 호스팅: out/을 몇 초 만에 배포

Q: 서버 사이드 렌더링을 사용하는 Next.js 앱을 여기에 호스팅할 수 있나요?

아니요. Lobsite는 파일을 제공하므로 정적 내보내기만 작동합니다. 페이지가 getServerSideProps, Server Actions 또는 동적 렌더링을 사용한다면 서버에서 Next.js를 실행하는 곳에 호스팅하세요.

Q: 내보내기 후 next/image 이미지가 깨지는 이유는 무엇인가요?

기본 이미지 로더에는 서버가 필요합니다. next.config.js에 images: { unoptimized: true }를 추가하거나 이미지 CDN을 가리키는 커스텀 로더를 설정하고 다시 빌드하세요.

Q: Next.js 404 페이지가 작동하나요?

네. next build는 not-found 페이지(App Router) 또는 pages/404(Pages Router)에서 404.html을 작성하며, Lobsite는 존재하지 않는 주소에 이를 제공합니다.

Next.js는 서버가 필요 없는 사이트를 빌드할 수 있습니다. output: "export"를 설정하면 next build가 모든 페이지를 HTML로 out/에 작성합니다. Lobsite는 그 폴더를 호스팅합니다. npm run build를 실행한 다음 npx lobsite를 실행하면 HTTPS가 적용된 *.lobsite.app 주소로 사이트가 공개됩니다. 처음부터 분명히 하자면, 이 페이지는 정적 내보내기에 관한 것입니다. 서버 렌더링, API 라우트, 미들웨어에는 Vercel 같은 Node.js 호스트가 필요합니다.

작동 방식

next.config.js에서 output: "export"로 정적 내보내기를 켜고(아래 참고) npm run build를 실행하세요. 사이트가 out/에 생성됩니다.
프로젝트에서 npx lobsite를 실행하세요. public/이나 .next/가 아닌 out/을 배포합니다. 첫 배포는 계정이 필요 없으며 6시간 동안 유지됩니다.
가져오기 링크로 무료 계정에 사이트를 유지하세요. 그 후 npm run build && npx lobsite를 실행할 때마다 같은 주소가 업데이트됩니다.

정적 내보내기용 next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: { unoptimized: true },
};

module.exports = nextConfig;

**output: "export"**는 next build가 out/을 작성하게 합니다. 이전 next export 명령어는 Next.js 14부터 사라졌으며 이 설정으로 대체되었습니다.
**images: { unoptimized: true }**는 next/image를 사용할 때 필요합니다. 기본 로더는 요청마다 서버에서 이미지 크기를 조정하기 때문입니다. 이 설정을 쓰면 이미지가 그대로 제공됩니다. 빌드 전에 크기를 조정하거나 커스텀 로더를 사용하세요.
**trailingSlash**는 꺼 두어도 됩니다. 페이지는 about.html로 작성되고 Lobsite는 /about에서 제공합니다.

정적 내보내기로 할 수 없는 것

Next.js 문서에 서버가 필요한 기능이 나열되어 있습니다. 가장 자주 부딪히는 것은 다음과 같습니다.

정적 GET 외의 API 라우트와 라우트 핸들러. 폼은 대신 /_lobsite/forms/contact로 보내세요. 폼을 참고하세요.
next.config의 redirects, rewrites, headers. 리디렉션과 헤더는 lobsite.toml로 옮기면 모든 요청에 적용됩니다. 리디렉션 생성기가 규칙을 작성해 줍니다.
페이지의 미들웨어, Server Actions, ISR, cookies() 또는 headers().
generateStaticParams 없는 동적 라우트. 모든 페이지를 빌드 시 알아야 합니다.

앱이 이들에 의존한다면 정적 사이트가 아니므로, 서버에서 Next.js를 실행하는 호스트가 올바른 선택입니다.

변경된 파일만 업로드

파일은 해시로 저장됩니다. 변경되지 않은 사이트를 다시 배포하면 0바이트가 업로드됩니다.

모든 배포에 URL 제공

공개 전에 미리 보세요. 리디렉션까지 포함해 클릭 한 번으로 롤백합니다.

어디서나 HTTPS

모든 사이트는 첫 배포부터 HTTPS가 적용된 *.lobsite.app 주소를 받습니다.

바로 작동하는 폼

폼의 대상을 /_lobsite/forms/contact로 지정하세요. 스팸 필터링이 포함됩니다.

구성은 파일 하나로

리디렉션, 헤더, 폼은 lobsite.toml에 있으며 각 배포와 함께 이동합니다.

확인할 수 있는 한도

모든 한도가 공개되어 있고, 모든 오류는 다음에 할 일을 알려 줍니다.

Next.js 호스트 비교

	Lobsite	Vercel	Netlify	GitHub Pages
정적 내보내기(`output: "export"`)	예	예	예	예
서버 렌더링, API 라우트, 미들웨어	아니요	예	예	아니요
서버에서 빌드	아니요: `out/` 배포	예	예	GitHub Actions에서
첫 배포 전 계정	불필요: 6시간 공개 후 무료로 유지	필요	필요	필요, 저장소도 필요
백엔드 없는 폼	예, 사이트가 계정에 있으면	아니요	예	아니요
커스텀 도메인	예, 무료	예	예	예

Vercel은 Next.js를 만들고 그 전부를 실행합니다. 정적 내보내기로 만든 마케팅 사이트, 블로그, 문서라면 Lobsite가 더 간단한 호스트입니다. 명령어 하나로 변경된 파일만 업로드하고 배포마다 미리보기 URL을 제공합니다.

자주 묻는 질문

서버 사이드 렌더링을 사용하는 Next.js 앱을 여기에 호스팅할 수 있나요?

아니요. Lobsite는 파일을 제공하므로 정적 내보내기만 작동합니다. 페이지가 getServerSideProps, Server Actions 또는 동적 렌더링을 사용한다면 서버에서 Next.js를 실행하는 곳에 호스팅하세요.

내보내기 후 next/image 이미지가 깨지는 이유는 무엇인가요?

기본 이미지 로더에는 서버가 필요합니다. next.config.js에 images: { unoptimized: true }를 추가하거나 이미지 CDN을 가리키는 커스텀 로더를 설정하고 다시 빌드하세요.

Next.js 404 페이지가 작동하나요?

네. next build는 not-found 페이지(App Router) 또는 pages/404(Pages Router)에서 404.html을 작성하며, Lobsite는 존재하지 않는 주소에 이를 제공합니다.

정적 내보내기에서 App Router를 사용할 수 있나요?

네. 서버 컴포넌트는 빌드 시 렌더링되고 클라이언트 컴포넌트는 평소처럼 브라우저에서 실행됩니다. 런타임에 요청이 필요한 기능만 사용할 수 없습니다.