var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),x=(a,n)=>{for(var s in n)l(a,s,{get:n[s],enumerable:!0})},i=(a,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of N(n))!k.call(a,c)&&c!==s&&l(a,c,{get:()=>n[c],enumerable:!(t=m(n,c))||t.enumerable});return a};var y=(a,n,s)=>(s=a!=null?h(u(a)):{},i(n||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),b=a=>i(l({},"__esModule",{value:!0}),a);var r=g((S,o)=>{o.exports=_jsx_runtime});var w={};x(w,{default:()=>d,frontmatter:()=>f});var e=y(r()),f={title:"Nextjs\uC5D0\uC11C \uC678\uBD80 \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9 \uC2DC \uBC1C\uC0DD\uD588\uB358 \uBB38\uC81C\uC640 \uD574\uACB0\uACFC\uC815",description:"\uD504\uB85C\uC81D\uD2B8\uB97C \uC9C4\uD589\uD558\uBA74\uC11C Ant Design \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB97C \uC0AC\uC6A9\uD588\uC2B5\uB2C8\uB2E4. \uC124\uCE58 \uD6C4 \uC801\uC6A9 \uC2DC \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uACE0, \uD574\uACB0\uD588\uB358 \uACFC\uC815\uB4E4\uC744 \uD480\uBA74\uC11C \uC798 \uBAA8\uB974\uB294 \uD0A4\uC6CC\uB4DC\uB4E4\uC740 \uD55C\uBC88 \uB354 \uC801\uC5B4\uBCF4\uC558\uC2B5\uB2C8\uB2E4.",tags:["Nextjs"],date:"2024-04-10",category:"\u{1F4BB} Dev"};function p(a){let n={a:"a",blockquote:"blockquote",br:"br",code:"code",div:"div",em:"em",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",span:"span",strong:"strong",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:["\uD604\uC7AC \uD504\uB85C\uC81D\uD2B8 \uAD6C\uC870\uB294 \uD604\uC7AC \uBAA8\uB178\uB808\uD3EC\uB85C \uAD6C\uC131 \uB418\uC5B4\uC788\uACE0, ",(0,e.jsx)(n.code,{children:"src/client"})," \uC640 ",(0,e.jsx)(n.code,{children:"src/admin"})," \uD504\uB85C\uC81D\uD2B8\uAC00 \uC874\uC7AC\uD55C\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uB450 \uD504\uB85C\uC81D\uD2B8 Antd Design \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB97C \uC0AC\uC6A9\uD558\uACE0 \uC788\uB294\uB370, ",(0,e.jsx)(n.code,{children:"src/client"}),"\uC5D0\uC11C\uB294 \uBB38\uC81C\uAC00 \uC5C6\uACE0, ",(0,e.jsx)(n.code,{children:"src/admin"}),"\uC5D0\uC11C\uB9CC \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD55C\uB2E4."]}),` `,(0,e.jsxs)(n.h2,{id:"\uD574\uACB0\uACFC\uC815",children:[(0,e.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uD574\uACB0\uACFC\uC815",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"\uD574\uACB0\uACFC\uC815"]}),` `,(0,e.jsxs)(n.h3,{id:"1-\uBC84\uC804\uC744-\uB9DE\uCDB0\uBCF4\uC790",children:[(0,e.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#1-\uBC84\uC804\uC744-\uB9DE\uCDB0\uBCF4\uC790",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"1. \uBC84\uC804\uC744 \uB9DE\uCDB0\uBCF4\uC790"]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"src/client"}),"\uC758 Ant Design \uBC84\uC804\uC740 ",(0,e.jsx)(n.strong,{children:"v5.13.2"})," \uBC84\uC804\uC744 \uC0AC\uC6A9\uD558\uACE0, ",(0,e.jsx)(n.code,{children:"src/admin"}),"\uC758 Ant Design \uBC84\uC804\uC740 ",(0,e.jsx)(n.strong,{children:"v5.16.1"})," \uBC84\uC804\uC744 \uC0AC\uC6A9 \uC911\uC774\uB2E4. \uBC84\uC804\uC774 \uC5C5\uB370\uC774\uD2B8 \uB418\uBA74\uC11C \uC774\uC804 \uBC84\uC804\uC758 \uD638\uD658\uC774 \uC81C\uB300\uB85C \uC774\uB904\uC9C0\uC9C0 \uC54A\uC740 \uAC83\uC73C\uB85C \uCD94\uCE21\uB41C\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uC6B0\uC120 ",(0,e.jsx)(n.strong,{children:"v5.13.2"})," \uBC84\uC804\uC73C\uB85C \uB9DE\uCDB0\uC11C \uD14C\uC2A4\uD2B8\uB97C \uC9C4\uD589\uD574\uBCF4\uC558\uB2E4."]}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.img,{src:"/images/2024/nextjs-external-library-issues-solutions/cannot-use-import-in-nextjs.png",alt:"image"})}),` `,(0,e.jsx)(n.p,{children:"\uB611\uAC19\uC740 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uB2E4.."}),` `,(0,e.jsx)(n.p,{children:"\uBC84\uC804 \uBB38\uC81C\uB294 \uC544\uB2CC \uBAA8\uB4C8 import\uB97C \uD560 \uC218 \uC5C6\uB2E4\uB294 \uC5D0\uB7EC\uC778\uAC70 \uAC19\uC544 \uC880 \uB354 \uAC80\uC0C9\uD574\uBCF4\uC558\uB2E4."}),` `,(0,e.jsxs)(n.h3,{id:"2-\uACF5\uC2DD\uBB38\uC11C\uB97C-\uC0B4\uD3B4\uBCF4\uC790",children:[(0,e.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#2-\uACF5\uC2DD\uBB38\uC11C\uB97C-\uC0B4\uD3B4\uBCF4\uC790",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"2. \uACF5\uC2DD\uBB38\uC11C\uB97C \uC0B4\uD3B4\uBCF4\uC790."]}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://ant.design/docs/react/use-with-next#using-pages-router",rel:"noopener noreferrer",target:"_blank",children:"Usage with Next.js - Ant Design"})}),` `,(0,e.jsxs)(n.p,{children:["\uC704 \uB9C1\uD06C\uB97C \uBCF4\uB2C8 Ant Design \uACF5\uC2DD\uBB38\uC11C\uC5D0\uC11C ",(0,e.jsx)(n.strong,{children:"page router"}),"\uB97C \uC0AC\uC6A9\uD560 \uB54C, \uC0C8\uB85C\uACE0\uCE68 \uC2DC \uD398\uC774\uC9C0\uC758 \uAE5C\uBC15\uC784\uC774 \uBC1C\uC0DD\uD558\uC5EC \uADF8\uAC83\uC744 \uD574\uACB0\uD574\uC8FC\uAE30 \uC704\uD574 ",(0,e.jsx)(n.code,{children:"@ant-design/cssinjs"})," \uBAA8\uB4C8\uC744 \uC124\uCE58\uD558\uB77C\uB294 \uAE00\uC774 \uC788\uB2E4."]}),` `,(0,e.jsx)(n.p,{children:"\uC0C8\uB85C\uACE0\uCE68 \uC2DC \uBAA8\uB4C8\uC744 \uAC00\uC838\uC624\uC9C0 \uBABB\uD558\uB294 \uBB38\uC81C \uB54C\uBB38\uC5D0 \uBC1C\uC0DD\uD55C \uC624\uB958\uC77C\uAE4C..?"}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:"\uACE0\uBBFC\uC740 \uD14C\uC2A4\uD2B8 \uC2DC\uAC04\uB9CC \uB2A6\uCD9C \uBFD0.."})}),` `,(0,e.jsx)(n.p,{children:"\uC124\uCE58\uBC29\uBC95\uACFC \uCF54\uB4DC\uB294 \uAC04\uB2E8\uD558\uB2E4."}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsx)(n.code,{className:"language-bash code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"yarn"})," ",(0,e.jsx)(n.span,{className:"token function",children:"add"}),` @ant-design/cssinjs `]})})}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/_document.tsx"}),(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"react"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," createCache",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," extractStyle",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"StyleProvider"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"@ant-design/cssinjs"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Document"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Head"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Html"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Main"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"NextScript"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"next/document"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"DocumentContext"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"next/document"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"MyDocument"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Html"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"en",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Head"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Main"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"NextScript"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MyDocument"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method-variable function-variable method function property-access",children:"getInitialProps"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"ctx",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"DocumentContext"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," cache ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"createCache"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," originalRenderPage ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ctx",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"renderPage"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ctx",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method-variable function-variable method function property-access",children:"renderPage"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"originalRenderPage"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"enhanceApp"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"App"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," props ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"StyleProvider"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"cache"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"cache",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"App"})]})," ",(0,e.jsxs)(n.span,{className:"token spread",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," initialProps ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"await"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Document"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"getInitialProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"ctx",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," style ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"extractStyle"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"cache",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"initialProps",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" styles",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsx)(n.span,{className:"token punctuation",children:"<"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"initialProps",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"styles"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"style"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"dangerouslySetInnerHTML"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," __html",(0,e.jsx)(n.span,{className:"token operator",children:":"})," style ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MyDocument"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["Nextjs \uBB38\uC11C\uC5D0\uC11C\uB294 ",(0,e.jsx)(n.code,{children:"_document"})," \uD3F4\uB354\uC5D0\uC11C ",(0,e.jsx)(n.code,{children:"getInitialProps"})," \uD558\uB294 \uAC83\uC744 \uCD94\uCC9C\uD558\uC9C0 \uC54A\uB294\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uADF8 \uC774\uC720\uB294 ",(0,e.jsx)(n.code,{children:"pages/_document"})," \uD3F4\uB354\uB294 html \uBB38\uC11C \uAD6C\uC870\uB97C \uC815\uC758\uD558\uB294\uB370 \uC0AC\uC6A9\uB418\uBBC0\uB85C \uC815\uC801\uC778 \uD398\uC774\uC9C0\uB2E4. \uADF8\uB7EC\uB098 ",(0,e.jsx)(n.code,{children:"getInitialProps"}),"\uB97C \uD558\uBBC0\uB85C\uC11C \uBAA8\uB4E0 \uD398\uC774\uC9C0 \uC694\uCCAD\uC5D0 \uD574\uB2F9 \uD568\uC218\uAC00 \uC2E4\uD589\uB418\uBBC0\uB85C \uD398\uC774\uC9C0 \uB85C\uB529\uC2DC\uAC04\uC5D0 \uBD80\uC815\uC801\uC778 \uC601\uD5A5\uC744 \uC904 \uC218 \uC788\uB2E4\uACE0 \uD55C\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uADF8\uB7FC\uC5D0\uB3C4 CSS-in-JS\uC640 \uAC19\uC740 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uAC00 \uC11C\uBC84 \uCE21 \uB80C\uB354\uB9C1\uC744 \uC9C0\uC6D0\uD558\uB294 \uACBD\uC6B0\uC5D0\uB9CC \uC0AC\uC6A9\uD574\uB3C4 \uC88B\uB2E4\uACE0 \uB418\uC5B4\uC788\uB2E4."]}),` `,(0,e.jsxs)(n.p,{children:["\uB370\uC774\uD130 \uC694\uCCAD\uC5D0\uB294 ",(0,e.jsx)(n.code,{children:"getInitialProps"})," \uB300\uC2E0 ",(0,e.jsx)(n.code,{children:"getServerSideProps"})," \uB098 ",(0,e.jsx)(n.code,{children:"getStaticProps"}),"\uB97C \uC774\uC6A9\uD558\uC790. [",(0,e.jsx)(n.a,{href:"https://nextjs.org/docs/pages/building-your-application/routing/custom-document#customizing-renderpage",rel:"noopener noreferrer",target:"_blank",children:"\uB9C1\uD06C"}),"]"]}),` `,(0,e.jsxs)(n.h3,{id:"3-nextconfigjs-transpilepackages-\uC635\uC158-\uC774\uC6A9\uD558\uAE30",children:[(0,e.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#3-nextconfigjs-transpilepackages-\uC635\uC158-\uC774\uC6A9\uD558\uAE30",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"3. next.config.js transpilePackages \uC635\uC158 \uC774\uC6A9\uD558\uAE30"]}),` `,(0,e.jsxs)(n.p,{children:["\uAC80\uC0C9\uC744 \uD558\uB2E4\uBCF4\uB2C8 \uB098\uC640 \uBE44\uC2B7\uD55C \uC0C1\uD669\uC758 \uC9C8\uBB38\uAE00\uC744 \uBCF4\uC558\uB2E4. [",(0,e.jsx)(n.a,{href:"https://www.inflearn.com/questions/1087222/next-13-14%EB%B2%84%EC%A0%84%EC%9C%BC%EB%A1%9C-%ED%95%98%EA%B3%A0-%EC%9E%88%EB%8A%94%EB%8D%B0-antd%EC%97%90%EC%84%9C-%EB%8B%A4%EC%9D%8C%EA%B3%BC%EA%B0%99%EC%9D%80-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%A9%EB%8B%88%EB%8B%A4",rel:"noopener noreferrer",target:"_blank",children:"\uB9C1\uD06C"}),"]"]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"transpilePackages"}),"\uB97C \uC774\uC6A9\uD574\uC11C \uBB38\uC81C\uB97C \uD574\uACB0\uD588\uB2E4\uACE0 \uD55C\uB2E4. \uADF8\uB798\uC11C \uD55C\uBC88 \uB530\uB77C\uD574\uBD24\uB2E4."]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"next.config.js"}),(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"/** @type {import('next').NextConfig} */"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," nextConfig ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"reactStrictMode"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"transpilePackages"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:'"antd"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:'"@ant-design"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:'"rc-util"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:'"rc-pagination"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:'"rc-picker"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:'"rc-tree"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:'"rc-table"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," nextConfig",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"\uC704\uC640 \uAC19\uC774 \uC791\uC131\uD558\uB2C8 \uC815\uB9D0 \uBB38\uC81C\uAC00 \uD574\uACB0\uB418\uC5C8\uB2E4."}),` `,(0,e.jsx)(n.p,{children:(0,e.jsxs)(n.em,{children:["\uB300\uCCB4 \uC65C? ",(0,e.jsx)(n.code,{children:"transpilePackages"})," \uAC00 \uBB50\uAE38\uB798?"]})}),` `,(0,e.jsxs)(n.p,{children:["\uACF5\uC2DD\uBB38\uC11C\uC5D0\uC11C \uBCF4\uBA74 ",(0,e.jsx)(n.code,{children:"transpilePackages"})," \uC635\uC158\uC744 \uC0AC\uC6A9\uD558\uBA74 Nextjs\uC5D0\uC11C\uB294 \uB85C\uCEEC \uD328\uD0A4\uC9C0(\uC608: \uBAA8\uB178\uB808\uD3EC) \uB610\uB294 \uC678\uBD80 \uC758\uC874\uC131(node_modules)\uC5D0\uC11C \uC758\uC874\uC131\uC744 \uC790\uB3D9\uC73C\uB85C \uBCC0\uD658\uD558\uACE0 \uBC88\uB4E4\uB9C1 \uD560 \uC218 \uC788\uB2E4\uACE0 \uD55C\uB2E4. [",(0,e.jsx)(n.a,{href:"https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages",rel:"noopener noreferrer",target:"_blank",children:"\uB9C1\uD06C"}),"]"]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:"https://fe-developers.kakaoent.com/2023/230420-beyond-solving-problem-part-1/",rel:"noopener noreferrer",target:"_blank",children:(0,e.jsx)(n.strong,{children:"\uC758\uC874\uC131\uC744 \uC790\uB3D9\uC73C\uB85C \uBCC0\uD658\uD55C\uB2E4\uB294\uAC8C \uBB54\uB370\uC694?"})}),(0,e.jsx)(n.br,{}),` `,"Next.js\uB294 Node.js\uC5D0\uC11C \uB3CC\uC544\uAC04\uB2E4. \uC989 \uC790\uBC14\uC2A4\uD06C\uB9BD\uD2B8 \uCF54\uB4DC\uAC00 ",(0,e.jsx)(n.strong,{children:"Node.js \uC11C\uBC84 \uD658\uACBD\uC5D0\uC11C\uB3C4 \uC2E4\uD589"}),"\uB420 \uC218 \uC788\uB2E4.",(0,e.jsx)(n.br,{}),` `,"Node.js \uC11C\uBC84 \uD658\uACBD\uC5D0\uC11C\uB294 CommonJS \uBAA8\uB4C8 \uC2DC\uC2A4\uD15C\uB9CC\uC744 \uC9C0\uC6D0\uD558\uAE30 \uB54C\uBB38\uC5D0 import \uB300\uC2E0 CommonJS \uBB38\uBC95\uC778 require\uB97C \uD1B5\uD574 \uBAA8\uB4C8\uC744 \uAC00\uC838\uC624\uB824\uACE0 \uC2DC\uB3C4\uD55C\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uADF8\uB807\uAE30\uC5D0 CommonJS\uB97C \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB97C \uCD94\uAC00\uD55C\uB2E4\uBA74 \uC758\uC874\uC131\uC744 \uBCC0\uD658 \uC2DC\uCF1C\uC900\uB2E4\uB294 \uC758\uBBF8\uB2E4.",(0,e.jsx)(n.br,{}),` `,"Nextjs 13.1 \uBC84\uC804\uC5D0\uC11C \uCD94\uAC00\uB41C \uBD80\uBD84\uC73C\uB85C \uC774\uC804 \uBC84\uC804\uC744 \uC0AC\uC6A9\uD558\uACE0 \uC788\uB2E4\uBA74 ",(0,e.jsx)(n.code,{children:"next-transpile-modules"}),"\uB77C\uC774\uBE0C\uB7EC\uB9AC\uB97C \uC0AC\uC6A9\uD558\uBA74 \uB41C\uB2E4."]}),` `]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:"https://toss.tech/article/commonjs-esm-exports-field",rel:"noopener noreferrer",target:"_blank",children:(0,e.jsx)(n.strong,{children:"CommonJS, ES Modules\uAC00 \uBB54\uB370\uC694?"})}),(0,e.jsx)(n.br,{}),` `,"CJS\uB294 ",(0,e.jsx)(n.code,{children:"require"})," / ",(0,e.jsx)(n.code,{children:"module.exports"})," \uB97C \uC0AC\uC6A9\uD558\uACE0, ESM\uC740 ",(0,e.jsx)(n.code,{children:"import"})," / ",(0,e.jsx)(n.code,{children:"export"})," \uBB38\uC744 \uC0AC\uC6A9\uD55C\uB2E4.",(0,e.jsx)(n.br,{}),` `,"CJS module loader\uB294 \uB3D9\uAE30\uC801\uC73C\uB85C \uC791\uB3D9\uD558\uACE0, ESM module loader\uB294 \uBE44\uB3D9\uAE30\uC801\uC73C\uB85C \uC791\uB3D9\uD55C\uB2E4.",(0,e.jsx)(n.br,{}),` `,"ESM\uC740 ",(0,e.jsx)(n.a,{href:"https://nodejs.org/api/esm.html#top-level-await",rel:"noopener noreferrer",target:"_blank",children:"Top-level Await"}),"\uC744 \uC9C0\uC6D0\uD558\uAE30 \uB54C\uBB38\uC5D0 \uBE44\uB3D9\uAE30\uC801\uC73C\uB85C \uB3D9\uC791\uD55C\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uB530\uB77C\uC11C ESM\uC5D0\uC11C CJS\uB97C ",(0,e.jsx)(n.code,{children:"import"})," \uD560 \uC218\uB294 \uC788\uC9C0\uB9CC, CJS\uC5D0\uC11C ESM\uC744 ",(0,e.jsx)(n.code,{children:"require"})," \uD560 \uC218\uB294 \uC5C6\uB2E4. \uC65C\uB0D0\uD558\uBA74 CJS\uB294 Top-level Await\uC744 \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uAE30 \uB54C\uBB38\uC774\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uC774 \uC678\uC5D0\uB3C4 \uB450 Module System\uC740 \uAE30\uBCF8\uC801\uC73C\uB85C \uB3D9\uC791\uC774 \uB2E4\uB974\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uB530\uB77C\uC11C \uB450 Module System\uC740 \uC11C\uB85C \uD638\uD658\uB418\uAE30 \uC5B4\uB835\uB2E4."]}),` `]}),` `,(0,e.jsxs)(n.h2,{id:"\uD6C4\uAE30",children:[(0,e.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uD6C4\uAE30",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"\uD6C4\uAE30"]}),` `,(0,e.jsxs)(n.p,{children:["\uCC98\uC74C\uC5D0 \uBC84\uC804 \uB9DE\uCD94\uB294 \uAC83\uC73C\uB85C \uC2DC\uC791\uD588\uB2E4\uAC00 traspilePackages, Module System \uAE4C\uC9C0 \uC654\uB2E4.",(0,e.jsx)(n.br,{}),` `,"Module System \uAD00\uB828\uD558\uC5EC \uC678\uBD80 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uAC00 CJS, ESM \uAC01\uAC01 \uC9C0\uC6D0\uD558\uAC70\uB098 \uD558\uC9C0 \uC54A\uC744 \uC218 \uC788\uC74C\uC744 \uCC98\uC74C \uC54C\uAC8C \uB418\uC5C8\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uBAA8\uB974\uB294 \uAC83\uB4E4\uC744 \uD558\uB098\uD558\uB098 \uC801\uC5B4\uAC00\uBA70 \uCC44\uC6CC\uAC00\uB2C8 \uB05D\uB3C4 \uC5C6\uB294 \uAC83 \uAC19\uB2E4. \uBAA8\uB974\uB294 \uAC8C \uB108\uBB34 \uB9CE\uACE0 \uC815\uBCF4\uB3C4 \uB108\uBB34 \uB9CE\uB2E4.",(0,e.jsx)(n.br,{}),` `,"\uAE30\uCD08\uAC00 \uBD80\uC871\uD568\uC744 \uB2E4\uC2DC \uAE68\uB2EC\uC73C\uBA70, \uC774 \uAE00\uC744 \uC801\uAE30 \uC804\uBCF4\uB2E4\uB294 \uC9C0\uC2DD\uC774 \uC870\uAE08 \uC0C1\uC2B9 \uD588\uC74C\uC5D0 \uAE30\uBED0\uD574\uC57C\uC9C0 ",(0,e.jsx)(n.span,{role:"img","aria-label":"grinning face with smiling eyes",children:"\u{1F601}"})]})]})}function d(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(p,{...a})}):p(a)}return b(w);})(); ;return Component;

Nextjs

Nextjs에서 외부 라이브러리 사용 시 발생했던 문제와 해결과정