본문 바로가기

Next

[Next 13] 버전 공용 컴포넌트 넣는법

파일구조 

app 폴더가 있으면

layout.js 안에 넣어서 수정을하면 그안에서 전페이지에 들어가게된다.

import Navar from '@/components/Navar'
import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Navar/>
        {children}
        </body>
    </html>
  )
}

page.js 보여줄때 :

1. 옆에 layout.js 가 있으면 그걸로 page.js 를 싸맴

2. 상위폴더에 layout.js 가 있으면 그걸로 1번 싸맴

3. 2번 위에 또 상위폴더에 layout.js 가 있으면 그걸로도 싸매서 2번사맴

 

다른폴더에서 layout.js 사용할때 코드

function 코드

export default function Layout({ children }) {
  return (
    <div>
      <p>현대카드 무이자이벤트중</p>
      {children}
    </div>
  )
}

함수형 코드

const layout = ({children}:any) => {
    return (
        <div>
            {children}
            <p>현대카드 무이자이벤트중</p>
        </div>
    );
};

export default layout;

'Next' 카테고리의 다른 글

Next 13 컴포넌트에 데이터를 전해주려면 props  (0) 2023.05.25
component 만드는법 2가지  (0) 2023.05.25
Catch url 사용법  (0) 2023.05.19
Dyanmic URL 사용법  (0) 2023.05.16
Next.js [get server side props]  (0) 2023.05.15