- 설치하기
npx create-next-app@latest
터미널에 이렇게 입력하고
이렇게 다 Yes로 하면
다음과 같은 파일 구조가 보인다.
여기서 layout, page 이 두 컴포넌트를 굉장히 많이 다룬다!
1. layout.tsx
2. page.tsx
3. package.json
scripts 부분에는 dev / build / start가 있다.
- 우리가 개발하는 중 사용하게 될 코드
npm run dev
- production 레벨로 배포하기 전 필요한 빌드 작업 과정을 실행!
- build하지 않고 start를 하는 경우 실행될 수 없다.
npm run build
- 만들어진 build 파일을 이용하여 실행시키는 방법
npm run start
- dynamic routing
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/products/:id" element={<Product />} />
</Routes>
</BrowserRouter>
);
};
export default Router;
<Route path="/products/:id" element={<Product />} /> 같은
이렇게 하게 되면, 패턴에 일치하는 모든 경로를 페이지로 연결하게 돼요. 예를들면
app/posts/[id]/page.tsx
파일의 경우 /posts/1 /posts/2 등 경로에 대해 동적으로 페이지를 생성
// app>test>[id]>page.tsx
import React from "react";
const TestDetailPage = ({
params,
}: {
params: {
id: string;
};
}) => {
return <div>Detail 페이지 : {params.id}</div>;
};
export default TestDetailPage;
- route groups
// src>app>(admin)>about>page.tsx
import React from "react";
const AdminAboutPage = () => {
return <div>소개 페이지입니다.</div>;
};
export default AdminAboutPage;
이렇게 ( ) 안에 폴더를 넣으면 routing에 포함되지 않는다.
- 특정 경로 하위에 있는 routing은 모두 공통 layout을 적용하고 싶거나, 특정 컴포넌트가 로딩중일 때, 오류가 발생했을 때 보여주고 싶은 UI가 있다면 ?
1. 특정 segment 이하의 route에서 적용받을 layout UI를 해당 폴더 안에 만든다.
2. children을 포함시켜서 공통 UI를 만듭니다.
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<section>
{children}
</section>
)
}
3. Next.js 프로젝트를 생성하고 나면 이미 root 경로에 layout.tsx 파일이 존재한다.
// src>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: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<a href="/blog">Blog</a>
</nav>
{children}
</body>
</html>
);
}
- not found
<Router>
<Routes>
<Route path={"/home"} element={<Home />} />
<Route path={"/*"} element={<h1>404: Not Found</h1>} />
</Routes>
</Router>
'Next.js > 기초' 카테고리의 다른 글
| [TIL] changeEvent (0) | 2024.03.21 |
|---|---|
| [TIL] TailwindCSS 사용하기 (0) | 2024.03.20 |
| [TIL] nextJS에 이미지 url 넣기 (0) | 2024.03.15 |
| [TIL] Next.JS에서 제공하는 4가지 렌더링 기법 (0) | 2024.03.14 |
| [TIL] Next.js 란? (0) | 2024.03.11 |