1. Layouts
nextJS는 먼저 layout component를 렌더링하고 URL을 체크하여 필요한 component를 렌더링함
다음과 같이 Navigation을 비롯한 Header, Footer등을 컴포넌트를 넣으면 어느 페이지에 가도 노출됨
// layout.tsx
import Navigation from "../components/navigation";
export const metadata = {
title: "Next.js",
description: "Generated by Next.js",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Navigation />
{children}
</body>
</html>
);
}특정 페이지만을 위한 layout도 작성 가능함
// app 하위 폴더에도 layout.tsx를 따로 작성
export default function AboutUsLayout({
children,
}: {
children: React.ReactNode;
}) {
return <div>{children} © foresec</div>;
}
하위 폴더 내에서 전부 적용됨
layout들이 겹쳐진다고 취소되기보다는 둘러싸여감
2. Metadata
route groups
(이름)의 형태로 작성시 URL을 생성하지 않음
의도나 역할에 따라 묶을 수 있음
Metadata
정적/동적 모두 Server component에서만 지원됨
Page나 Layout에서만 export 가능
title: html head의 title 태그description:html head의 meta 태그 name과 content
여러 곳에 존재할 경우 병합됨
정적 메타데이터
export const metadata = {
title: "Home | Next movies",
description: "The best movies on the best framework",
};동적 메타데이터
객체 형태로 지정 가능
// app/layout.tsx
export const metadata: Metadata = {
title: {
template: "%s | Next Movies",
default : "Loading...",
},
};// app/(home)/page.tsx
export const metadata = {
title: "Home",
};
// app/about-us/page.tsx
export const metadata = {
title: "About Us",
};더 많은 형태는 https://nextjs.org/docs/app/api-reference/functions/generate-metadata에서 참고
3. Dynamic Routes
[]을 통해 동적 라우트 구현
예시
console
주소가 다음과 같을 때
http://localhost:3000/movies/12323?region=kr&page=2
export default function MovieDetail (props){
console.log(props)
return <h1>Movie</h1>
}
// { params: { id: '12323' }, searchParams: { region: 'kr', page: '2' } }이와 같이 console을 찍으면 브라우저에서의 console창에서 찍히는 것이 아닌, 서버 단에서 console이 찍힘
dynamic routes 적용
별도의 hook 없이 적용가능
export default function MovieDetail({
params: { id },
}: {
params: { id: string };
}) {
return <h1>Movie {id}</h1>;
}아래 강의를 위주로 공식문서와 타 블로그 정보들을 참고하여 작성
https://nomadcoders.co/nextjs-for-beginners/lobby
왼쪽 태그보다 시리즈 위주로 구분