npx create-next-app@latest
설치
npm run dev 실행
페이지 라우팅
app 하위경로로 폴더생성하면 그게 바로 url 로 적용이 된다. page.js라고 폴더하위에 작성하면 해당폴더의 index 파일로 자동 반영이됨
공통 레이아웃 적용
넵바나 푸터 같은 공통레이아웃은 layout.js로 반영한다
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<div className="navbar">
<Link href="/">홈</Link>
<Link href="/list">목록</Link>
</div>
{children}
</body>
</html>
);
}