๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“บ Front End/-- react & redux & nextjs

[Next.js] _document.js๋กœ ๋ ˆ์ด์•„์›ƒ ํ…œํ”Œ๋ฆฟ์„ ์‚ฌ์šฉํ•ด์„œ html ๊ณผ body ํƒœ๊ทธ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•˜๊ธฐ.

by Wonit 2021. 1. 3.

Document ์ปดํฌ๋„ŒํŠธ

Next.js์—๋Š” <html> ํƒœ๊ทธ์™€ <body> ํƒœ๊ทธ๋ฅผ ์กฐ์ž‘ํ•˜๊ธฐ ์œ„ํ•ด์„œ <Document> ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

 

Build ์‹œ์ ์— _document.jsํŒŒ์ผ์„ pages ๋””๋ ‰ํ† ๋ฆฌ ์•ˆ์—์„œ ํƒ์ƒ‰ํ•˜๊ณ  <Document>๋ฅผ extends ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์ปค์Šคํ…€ ์„ค์ •์„ ๋ฐ›์•„๋“คํžˆ๋Š”๋ฐ, ์ด๋Š” ํ•„์ˆ˜ ํŒŒ์ผ์€ ์•„๋‹ˆ๋ฉฐ, ๋งŒ์•ฝ ์šฐ๋ฆฌ๊ฐ€ ์ปค์Šคํ…€ํ•˜์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ Next์˜ ๋ชจ๋“ˆ์— ์กด์žฌํ•˜๋Š” _document.js ํŒŒ์ผ์„ ์‹คํ–‰์‹œํ‚จ๋‹ค.


ํ”„๋กœ์ ํŠธ๊ฐ€ ์ปค์งˆ ์ˆ˜๋ก HTML ํƒœ๊ทธ๋ฅผ ์กฐ์ž‘ํ•ด์•ผํ•  ์ผ๋“ค์ด ๋งŽ์•„์ง€๋ฏ€๋กœ ์šฐ๋ฆฌ๋Š” _document.js์˜ <Document> ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋Š” ๋Šฅ๋ ฅ์ด ์žˆ์–ด์•ผ ํ•œ๋‹ค.

๊ธฐ๋ณธ ๊ตฌ์กฐ

pages ๋””๋ ‰ํ† ๋ฆฌ ์•„๋ž˜์— _document.jsํŒŒ์ผ์„ ์ƒ์„ฑํ•œ๋‹ค.

 

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

<Document>๋Š” Class ํ˜• ์ปดํฌ๋„ŒํŠธ๋งŒ ์ง€์›ํ•˜๋ฉฐ ๋‹ค์Œ 4๊ฐ€์ง€ ์ปดํฌ๋„ŒํŠธ๋Š” ํ•„์ˆ˜๋กœ ์กด์žฌํ•ด์•ผ ํ•œ๋‹ค.

  • <Html>
  • <Head>
  • <Main>
  • <NextScript>

์—ฌ๊ธฐ์„œ ์„ค๋ช…ํ•˜์ง€ ์•Š๋Š” <Main>๊ณผ <NextScript>๋Š” ์ด๊ณณ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

 

์ฃผ์˜

import Document, { Html, Head, Main, NextScript } from 'next/document'

๊ทธ๋ฆฌ๊ณ  4๊ฐ€์ง€ ํ•„์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋Š” ์œ„์™€ ๊ฐ™์ด next/document์—์„œ import ํ•ด์•ผํ•œ๋‹ค.

 

์šฐ๋ฆฌ๋Š” next/head์—์„œ ์ œ๊ณตํ•˜๋Š” <Head> ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ง€๋‚œ ์‹œ๊ฐ„Next์—์„œ head ํƒœ๊ทธ๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋ฐฐ์šด์ ์ด ์žˆ๋‹ค.


๊ทธ๊ฒƒ๊ณผ ์‚ฌ์šฉ๋ฒ• ์šฉ๋„๊ฐ€ ์กฐ๊ธˆ ๋‹ค๋ฅธ๋ฐ,

next/head์˜ Head ์ปดํฌ๋„ŒํŠธ

next/head์˜ Head ์ปดํฌ๋„ŒํŠธ๋Š” ํŠน์ • ํŽ˜์ด์ง€์—์„œ ๋ฐ”๋€Œ๋Š” Head ํƒœ๊ทธ์—์„œ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค.


์˜ˆ๋ฅผ ๋“ค์–ด ํŽ˜์ด์ง€๋งˆ๋‹ค ๋ฐ”๋€Œ๋Š” <title> ํƒœ๊ทธ๋ฅผ ์ ์šฉํ•  ๊ฒฝ์šฐ, ์ด๋Š” pages ๋””๋ ‰ํ† ๋ฆฌ ๋‚ด์— ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ next/head์˜ <Head> ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ด์šฉํ•ด์•ผํ•œ๋‹ค.

 

next/document ์˜ Head ์ปดํฌ๋„ŒํŠธ

next/document ์˜ Head ์ปดํฌ๋„ŒํŠธ๋Š” ๋ชจ๋“  ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉํ•  Head ์†์„ฑ๋“ค์„ ์กฐ์ž‘ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.


์˜ˆ๋ฅผ ๋“ค์–ด ํŽ˜์ด์ง€์˜ ์–ธ์–ด ์„ค์ •์ธ <lang>๊ณผ ๊ฐ™์€ ์†์„ฑ์ผ ๊ฒฝ์šฐ _document.js์—์„œ next/document์˜ <Head>๋ฅผ import ํ•˜์—ฌ ์‚ฌ์šฉํ•œ๋‹ค.

 

๋์œผ๋กœ

์ด๋ ‡๊ฒŒ ์˜ค๋Š˜์€ document.js ํŒŒ์ผ์—์„œ Html ๊ตฌ์กฐ๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜๋‹ค.


Document ์ปดํฌ๋„ŒํŠธ๋Š” ์˜ค๋กœ์ง€ ์„œ๋ฒ„์—์„œ๋งŒ ๋ Œ๋”๋˜๋ฏ€๋กœ onClick๊ณผ ๊ฐ™์€ ์ด๋ฒคํŠธ ํ—จ๋“ค๋Ÿฌ๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค.


๋˜ํ•œ <Main /> ๋ฐ–์— ์žˆ๋Š” ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š๊ณ , ๋งŒ์•ฝ HTML์— ํ•ญ์ƒ ์กด์žฌํ•˜๋Š” NavBar์ด๋‚˜ SideBar๊ณผ ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ ์šฉ์‹œํ‚ค๊ณ  ์‹ถ๋‹ค๋ฉด App ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ด์šฉํ•˜๋ฉด ๋œ๋‹ค.


App ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ํ•ด๋‹น ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ํ™•์ธํ•ด๋ณด๋ฉด ๋œ๋‹ค!

๋Œ“๊ธ€