파일구조
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 |