Next.js: ํŽ˜์ด์ง€/_component.js๋ฅผ components/Component.js๋กœ ์ด๋™

์— ๋งŒ๋“  2017๋…„ 03์›” 17์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vercel/next.js

  • pages/_document.js > components/Document.js
  • pages/_error.js > components/Error.js

์œ„์˜ ์–ด๋Š ๊ฒƒ๋„ _pages_๊ฐ€ ์•„๋‹ˆ๋ฉฐ ํŠน๋ณ„ํ•œ _components_์ž…๋‹ˆ๋‹ค. ๋ชจ๋“  ์‚ฌ๋žŒ์ด pages ์˜†์— $ components ํด๋”๋ฅผ ๊ฐ–๋Š” ๊ทœ์น™์„ ์ฑ„ํƒํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํด๋”๋ฅผ ์—ฌ๊ธฐ๋กœ ์˜ฎ๊ธฐ๊ณ  ์‚ฌ์šฉ๋˜๋Š” _reserved_ ๊ตฌ์„ฑ ์š”์†Œ ์ด๋ฆ„์ž„์„ ๋ฌธ์„œํ™”ํ•˜๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ๋” ๋ฉ‹์ง€๊ณ  "๋” ์ •ํ™•ํ•œ" IMO๊ฐ€ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ์œผ๋กœ.

pages ์—์„œ _๋ชจ๋“ _ JS ํŒŒ์ผ์„ ์ฝ์„ ์ˆ˜ ์žˆ๊ณ  ์ด๋Ÿฌํ•œ ํŠน๋ณ„ํ•œ ๊ฒฝ์šฐ๋ฅผ ๊ฑธ๋Ÿฌ๋‚ผ ํ•„์š”๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฒƒ์ด ๋” ๊น”๋”ํ•˜๊ณ  ์ฝ”๋“œ ๋ถ„ํ•  ๋ฐ ๋ฒˆ๋“ค๋ง ๋…ผ๋ฆฌ๋ฅผ ๋‹จ์ˆœํ™”ํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๋˜ํ•œ file์ด๋ผ๋Š” ์ด๋ฆ„์˜ ์•ฝ๊ฐ„ ๋ชป์ƒ๊ธด ๋ฐ‘์ค„์„ ๊ทผ์ ˆํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค...๊ทธ๊ฑด ์ œ ์ƒ๊ฐ์ผ ๋ฟ์ž…๋‹ˆ๋‹ค!

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด PR https://github.com/zeit/next.js/pull/936 ์„ ๋ฐฉ๊ธˆ ์ฝ์—ˆ์œผ๋ฏ€๋กœ ์ด ์ œ์•ˆ์€ pagesDirectory next.config.js ๊ฐœ์ฒด์—์„œ๋„ ์ฒ˜๋ฆฌ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

documentComponent ๋ฐ errorComponent $ ์™€ ๊ฐ™์€ ๋˜ ๋‹ค๋ฅธ ๋ช‡ ๊ฐ€์ง€ ์†Œํ’ˆ์„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// next.config.js
module.exports = {
  pagesDirectory: 'views',
  documentComponent: 'components/Document.js',
  errorComponent: 'components/Error.js'
}

๋ชจ๋“  3 ๋Œ“๊ธ€

๊ฐ์‚ฌ ํ•ด์š”. ๋‹น์‹ ์€ ์œ ํšจํ•œ ํฌ์ธํŠธ๋ฅผ ์–ป์—ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ๋‹จ๊ธฐ์ ์œผ๋กœ๋Š” ๊ทธ๊ฒƒ์„ ๋ฐ”๊พธ์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

2.0.0 ๊ฐ€ ๊ณง ์ถœ์‹œ๋˜๋Š” ๋งŒํผ, ์ด๋Ÿฐ ๋ธŒ๋ ˆ์ดํ‚น ์ฒด์ธ์ง€๋ฅผ ์†Œ๊ฐœํ•  ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ๊ธฐํšŒ๊ฐ€ ๋˜์ง€ ์•Š์„๊นŒ ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‘ ์˜ต์…˜์„ ๋ชจ๋‘ ์ง€์›ํ•˜๊ณ  pages/_document.js ๋ฐ pages/_error.js ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๊ฒฝ๊ณ ๋ฅผ ๊ธฐ๋กํ•˜๊ณ  ํŒŒ์ผ์„ ์ด๋™ํ•˜๊ณ  ์ด๋ฆ„์„ ๋ฐ”๊พธ๋ผ๊ณ  ์กฐ์–ธํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๊นŒ? ๊ทธ๋ ‡๊ฒŒ ํ•˜๋ฉด ์•„๋ฌด ๊ฒƒ๋„ ๊นจ์ง€์ง€ ์•Š๊ณ  ์‚ฌ๋žŒ๋“ค์ด ์ด์ฃผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด PR https://github.com/zeit/next.js/pull/936 ์„ ๋ฐฉ๊ธˆ ์ฝ์—ˆ์œผ๋ฏ€๋กœ ์ด ์ œ์•ˆ์€ pagesDirectory next.config.js ๊ฐœ์ฒด์—์„œ๋„ ์ฒ˜๋ฆฌ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

documentComponent ๋ฐ errorComponent $ ์™€ ๊ฐ™์€ ๋˜ ๋‹ค๋ฅธ ๋ช‡ ๊ฐ€์ง€ ์†Œํ’ˆ์„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// next.config.js
module.exports = {
  pagesDirectory: 'views',
  documentComponent: 'components/Document.js',
  errorComponent: 'components/Error.js'
}
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰