Today I Learned
- Next.js 13 버전 Layouts 기능 공부하기
Next.js
Layouts
A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.
You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a child page during rendering.
// app/dashboard/layout.tsx
export default function DashboardLayout({
children, // will be a page or nested layout
}: {
children: React.ReactNode,
}) {
return (
<section>
{/* Include shared UI here e.g. a header or sidebar */}
<nav></nav>
{children}
</section>
);
}Good to know:
- The top-most layout is called the Root Layout. This required layout is shared across all pages in an application. Root layouts must contain <html> and <body> tags.
- Any route segment can optionally define its own Layout. These layouts will be shared across all pages in that segment.
- Layouts in a route are nested by default. Each parent layout wraps child layouts below it using the React children prop.
- Layouts are Server Components by default but can be set to a Client Component.
- Layouts can fetch data.
- Passing data between a parent layout and its children is not possible. However, you can fetch the same data in a route more than once, and React will automatically dedupe the requests without affecting performance.
- .js, .jsx, or .tsx file extensions can be used for Layouts.
- A layout.js and page.js file can be defined in the same folder. The layout will wrap the page.
Root Layout
// app/layout.tsx
export default function RootLayout({ children }: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}The root layout is defined at the top level of the app directory and applies to all routes. This layout enables you to modify the initial HTML returned from the server.
Good to know:
- The app directory must include a root layout.
- The root layout must define <html> and <body> tags since Next.js does not automatically create them.
- You can use the built-in SEO support to manage <head> HTML elements, for example, the <title> element.
- You can use route groups to create multiple root layouts.
- The root layout is a Server Component by default and can not be set to a Client Component.
Migrating from the pages directory: The root layout replaces the _app.js and _document.js files.
Nesting Layouts
If you were to combine the two layouts above, the root layout (app/layout.js) would wrap the dashboard layout (app/dashboard/layout.js), which would wrap route segments inside app/dashboard/*.
The two layouts would be nested as such:
출처
https://beta.nextjs.org/docs/routing/pages-and-layouts
그 외 참고 문서
https://velog.io/@brgndy/Next.js-13-라우팅
https://velog.io/@phrygia/2022-11-06-nextjs-13#1-appdirectory-beta
https://youtu.be/vuznUqirz5I?t=309
https://nextjs.org/blog/next-13#layouts
https://app-dir.vercel.app/layouts
회고
next.js 13 버전에서 변경된 routes 구조라든지 layout 파일이 어떤 기능을 하는 건지 궁금해서 여기저기 찾아다니며 공부했다. 블로그와 유튜브에서 자료들을 많이 찾아다녔지만 양질의 정보는 찾지 못했고, 돌아 돌아 찾아낸 건 결국 공식문서였다. 역시 궁금한 게 생기면 공식문서부터 찾아보는 습관을 들여야겠다!
'TIL' 카테고리의 다른 글
| [TIL] 2023.05.01 MySQL_Subquery (0) | 2023.05.01 |
|---|---|
| [TIL] 2023.04.30 MySQL_LEFT JOIN, INNER JOIN (0) | 2023.04.30 |
| [TIL] 2023.04.28 MySQL_GROUP BY, ORDER BY (0) | 2023.04.28 |
| [TIL] 2023.04.28 MySQL_SELECT, WHERE (0) | 2023.04.28 |
| [TIL] 2023.04.07 기술면접 스터디 (0) | 2023.04.07 |
댓글