사용법의 틀이 정해져있다는 뜻입니다.
예를 들면, react-router-dom으로 주소를 만들었던 React 방식 대신 파일 구조를 다르게 하면 자동으로 주소를 만들어줍니다. (아래에서 알아봅시다)
<BrowserRouter>
<Routes>
<Route path="/" element={<Main products={products} />} />
<Route path="/products" element={<Products products={products} />} />
<Route
path="/products/:id"
element={<Product products={products} />}
/>
<Route path="/login" element={<div>로그인 페이지</div>} />
<Route path="/signup" element={<div>회원가입 페이지</div>} />
</Routes>
</BrowserRouter>
설치하기
npx create-next-app@latest
What is your project named? 폴더이름작성
Would you like to use **Typescript**? YES
Would you like to use **ESLint**? YES
Would you like to use **Tailwind CSS**? YES
Would you like to use **`src/` directory**? YES # No로 입력해도 상관 없습니다.
Would you like to use **App Router?** (recommended) YES
Would you like to customize the default **import alias** (@/*)? NO
폴더로 이동하기 (혹은 해당 폴더를 vscode로 직접 다시 열기)
cd 폴더명
// ex) cd nextjs-basic
페이지 만드는 법 기본
<주소>/<주소>/detail[이름]**을 작성하면 됩니다.
<주소>/detail/1<주소>/detail/2<주소>/detail/가나다<주소>/detail/마ㅣㅇㄹ니ㅓㅁㅇ니람ㄴㅇㄹ페이지로 만들지 않는 법
_폴더명 과 같이 작성합니다.역할별로 묶기
역할 혹은 기능별로 묶고 싶으면 (폴더명)과 같이 작성합니다.
공통으로 사용하는 레이아웃이 다를 때 주로 다른 폴더로 묶습니다.
(폴더명)의 폴더명은 주소에 포함되지 않습니다.
group folders
<주소>/<aside> 💡 ⚠️ 참고: app/page.tsx랑 주소가 똑같을 경우, app/page.tsx가 우선이므로 나오지 않습니다. → app/page.tsx를 삭제하거나, 경로를 다르게 변경해야 합니다.
</aside>
<주소>/1<주소>/2<주소>/림ㅇㄹㅁㄴㅇㄹ레이아웃 만들기
공통으로 쓰이는 레이아웃을 만들 수 있습니다.
layout.tsx라는 파일명을 사용하면 레이아웃을 자동으로 만들어집니다.
children props를 꼭 사용해야 합니다.
export default function MemberLayout({ children }: { children: React.ReactNode }) {
return <div>멤버 그룹의 레이아웃이다 {children}</div>;
}
예시)
주소/:id 페이지에 레이아웃이 적용됩니다.metadata 작성하기
app/layout.tsx
**import type { Metadata } from "next";**
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
**export const metadata: Metadata = {
title: "우리만의 웹사이트",
description: "우리만의 웹사이트입니다.",
};**
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
src/app/layout.tsx 코드
{children}</body>
</html>
);
}