1. Next 프로젝트 시작하기
원하는 폴더로 이동한 다음 next 프로젝트를 시작하는 명령어를 입력한다.
npx create-next-app@latest
원하는 프로젝트의 이름을 물어보고 기본 설정을
어떻게 할건지 Yes or No를 통해 설정한다.
app폴더는 주소와 관련된 파일들만 들어간다.
주소와 관련 없는 파일은 app 폴더 바깥에 두는 것이 좋다.
Dynamic Routes
주소를 이동할 때 계속 변경되는 값은 누구든지 해당할 수
있도록 [폴더명]으로 폴더를 만든다.
즉, 어떤 값이 될지 모르는 경우, 대괄호를 이용한다.
만약 유저가 만든 게시물을 보여주는 주소로 이동할 때,
유저의 이름과 게시물의 id는 예측할 수 없기 때문에
대괄호가 담긴 폴더명으로 사용한다.
[username] / status/ [id]
아래와 같은 폴더 구조는 유저 네임의 경우,
home, compose, explore 페이지를 제외한 나머지가
유저 네임 폴더에 포함된다. (우선순위 최후순)
📁 app 👉 home
--------->👉 compose
---------> 👉 explore
---------> 👉 [username] 👉 status 👉 [id]
💡
not-found.tsx는 우리가 미리 만들어둔 페이지 주소가 아닐때 보여줄 수 있다.
export default const NotFound: NextPage = () => {
return (
<div>
<div>이 페이지는 존재하지 않습니다. 다른 페이지를 검색해 보세요. </div>
<Link href = '/search'>검색</Link>
</div>
)
}app 폴더 상위에 있는 layout.tsx는 루트 레이아웃으로 모든 페이지에
공통적으로 적용된 레이아웃이다.
📁 app 👉 📜 layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<div>{children}</div>
</body>
</html>
);
}만약 각각 home, explore, compose와 같이 페이지마다 레이아웃을 만들고 싶으면
해당 폴더 안에 layout.tsx 파일을 따로 만들면 된다.
상위 레이아웃(RootLayout)은 항상 존재하며 상위 레이아웃에서의 children은 HomeLayout에 해당되며 그 안에 HomePage가 존재한다.
📁 app 👉 📁 home 👉 📜 layout.tsx
export default function HomeLayout({children}) {
return (
<div>{children}</div>
);
}RootLayout ➡️ HomeLayout ➡️ HomePage (📁 app 👉 📁 home 👉 📜 page.tsx)
와 같은 계층 구조를 가진다.
