오랜만에 Next.js 강의를 다시 듣다가, 예전에는 app/page.tsx 파일에서 단순히 텍스트만 리턴해도 localhost를 열면 그 텍스트가 그대로 화면에 출력됐던 기억이 있었다.
export default function Page() {
return <h1>Hello</h1>;
}
하지만 지금 최신 버전 (Nect.js 16+)에서는 상황이 조금 다르다
npm run dev 후 페이지를 열어보니 아래와 같은 런타임 에러가 등장한다.
즉, 이제는 Root Layout, <html>과 <body> 태그를 포함한 레이아웃 파일이 반드시 필요하다는 뜻이다.
🔗 관련 문서:
Root Layout 문서
https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required
왜 갑자기 레이아웃이 필수가 되었을까?
이 변화는 단순한 문법 변경이 아니라, Next.js 내부 구조가 크게 바뀌면서 생긴 차이다.
Next.js 13+부터 도입된 App Router는 기존에 쓰이던 Pages Router 방식과 완전히 다른 렌더링 구조를 갖는다.
과거 Pages Router 에서는
- 페이지는 /pages 폴더에 위치
- HTML 구조 (<html>, <body>, <head> 등) Next.js가 자동 생성
- 이후 개발자 단순 페이지 작성하면 됐었음
- 그래서 page.tsx 에 텍스트만 반환해도 별 문제가 없었다
App Router (13~16)에서는 구조가 완전히 달라짐
App Router는 더 현대적인 React 패턴을 도입하기 위해 만들어짐
- React Server Components 기본 적용
- 중첩 레이아웃 (Nested Layouts) 지원
- 페이지 전환 시 레이아웃 유지 > 성능 향상
- 서버/클라이언트 컴포넌트 명확하게 분리
🔗 관련 문서:
App Router 소개
https://nextjs.org/docs/app
Nested Layouts 개념
https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#nested-layouts
이런 기능을 가능하게 하려면 앱 전체를 감싸는 루트 HTML 구조가 필요하다.
app/layout.tsx가 필수인 이유임.
// app/layout.tsx
export const metadata = {
title: "My App",
description: "Generated by Next.js",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
'기초다지기 > react' 카테고리의 다른 글
| firestore? (0) | 2024.07.01 |
|---|---|
| react useNavigate (1) | 2024.07.01 |
| react context (0) | 2024.07.01 |
| Firebase에서 onAuthStateChanged 메서드를 사용해 사용자 인증상태 변화 감지 (1) | 2024.06.28 |
| firebase 사용자 생성 후 비밀번호 인증 (0) | 2024.06.28 |