인프런 커뮤니티 질문&답변
작성한 질문수
build시 dynamic route 에러
해결된 질문
작성
·
1.6K
0
> duckblog@0.1.0 build
> next build && next export
⚠ Invalid next.config.js options detected:
⚠ Unrecognized key(s) in object: 'appDir' at "experimental"
⚠ Unrecognized key(s) in object: 'dynamic'
⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
▲ Next.js 14.0.4
✓ Creating an optimized production build
✓ Compiled successfully
✓ Linting and checking validity of types
> Build error occurred
Error: Page "/post/[id]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.
at /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:1012:59
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20)
at async Promise.all (index 6)
at async /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:892:17
at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20)
at async /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:829:124
at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20)
at async build (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:187:29)
at async main (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/bin/next:157:5)
next.config.js
/** @type {{output: string, assetPrefix: string, experimental: {appDir: boolean}}} */
const nextConfig = {
experimental: {
appDir: true,
},
output: "export",
assetPrefix: "/duckblog/",
// dynamic: "force-static",
};
module.exports = nextConfig;
build시에 발생하는 에러입니다. dynamic route에서 에러가 발생하는것 같은데 깃헙이슈나 레디스에 올라와있는 방법으로도 잘 해결이 안되네요... output export 를 없애고 빌드르 하면 아래와 같은 에러가 발생합니다
The "next export" command has been removed in favor of "output: export" in next.config.js. Learn more: https://nextjs.org/docs/advanced-features/static-html-export
답변 1
0
next export를 사용하시는 이유가 무엇인가요? 정적 빌드를 하시려는 건가요? /post/[id]같은 dynamic route가 있으면 export할 수 없습니다.
dynamic route를 export하려면 generateStaticParams를 쓰셔야 합니다.
https://nextjs.org/docs/app/api-reference/functions/generate-static-params
○ (Static) prerendered as static content
λ (Dynamic) server-rendered on demand using Node.js
Error: ENOENT: no such file or directory, stat '/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/out'
at Object.statSync (node:fs:1690:3)
at Object.statSync (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/graceful-fs/polyfills.js:319:16)
at Object.publish (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/gh-pages/lib/index.js:90:13)
at /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/gh-pages/bin/gh-pages.js:12:13
at new Promise (<anonymous>)
at publish (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/gh-pages/bin/gh-pages.js:10:10)
at /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/gh-pages/bin/gh-pages.js:140:12
✘ Duck 🦋 ~/Documents/01.GitHub/duckblog main ± npm run deploy
> duckblog@0.1.0 deploy
> npm run build && gh-pages -d duckblog
> duckblog@0.1.0 build
> next build
⚠ Invalid next.config.js options detected:
⚠ Unrecognized key(s) in object: 'appDir' at "experimental"
⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
▲ Next.js 14.0.4
✓ Creating an optimized production build
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
Generating static pages (3/5) [= ]
[
{ title: '[Windows] 시놀로지 외부 네트워크 드라이브 설정 (WebDAV)' },
{ title: '[Windows] 시놀로지 외부 네트워크 드라이브 설정 (WebDAV)' }
]
[
{ title: '[Windows] 시놀로지 외부 네트워크 드라이브 설정 (WebDAV)' },
{ title: '[Windows] 시놀로지 외부 네트워크 드라이브 설정 (WebDAV)' }
✓ Generating static pages (5/5)
✓ Collecting build traces
✓ Finalizing page optimization
Route (app) Size First Load JS
┌ ○ / 823 B 82.7 kB
├ ○ /_not-found 875 B 82.8 kB
└ λ /post/[id] 137 B 82 kB
+ First Load JS shared by all 81.9 kB
├ chunks/938-ae3b98e17d2c2d59.js 26.7 kB
├ chunks/fd9d1056-e2c7d479a52b4888.js 53.3 kB
├ chunks/main-app-6d94b1a10065a558.js 222 B
└ chunks/webpack-8ef64c27aab8ba52.js 1.72 kB
○ (Static) prerendered as static content
λ (Dynamic) server-rendered on demand using Node.js
Error: ENOENT: no such file or directory, stat '/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/duckblog'
at Object.statSync (node:fs:1690:3)
at Object.statSync (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/graceful-fs/polyfills.js:319:16)
at Object.publish (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/gh-pages/lib/index.js:90:13)
at /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/gh-pages/bin/gh-pages.js:12:13
at new Promise (<anonymous>)
at publish (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/gh-pages/bin/gh-pages.js:10:10)
at /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/gh-pages/bin/gh-pages.js:140:12
gh-pages를 사용할때 정적 파일을 저장해둔 곳을deploy해줘야 하는것 같은데 deploy 해서 확인해보면 404에러가 뜨고 있습니다.
일단 깃헙페이지는 정적이므로 next build 시 output: export를 쓰시는 게 맞고, generateStaticParams로 post/[id]를 전부 미리 빌드하셔야 합니다. 그리고 빌드된 결과물 페이지를 gh-pages로 올리시면 됩니다.
깃블로그를 넥스트로 한번 해보고 있었는데 처음에 export없이 빌드를해도 안돼서 한번 넣어 본 것이였습니다.