2025. 7. 18. 12:47ㆍNext.js + TypeScript
설치 명령어
일반
npx create-next-app 프로젝트명
yarn
yarn create next-app 프로젝트명
설치 시 설정 분기
- Would you like to use TypeScript? ... Yes
- Would you like to use ESLint? ... Yes
- Would you like your code inside a src/ directory? ... Yes
- Would you like to use App Router? (recommended) ... Yes
- Would you like to use Turbopack for next dev? ... Yes
- Would you like to customize the import alias (@/* by default)? ... No
리액트와 next.js의 다른점은 라우터를 따로 쓸 필요가 없다는 것.
게다가 App.js가 없다. app폴더가 곧 Router가 된다.
그리고 폴더경로가 곧 url이 된다.
app 폴더에 만든 폴더 이름 = url
components 폴더 = 실질적으로 페이지를 구성하는 컴포넌트들
app 폴더 = components 폴더에서 만든 컴포넌트의 최종 렌더링 단위.
components/practice01/index.tsx
"use client";
import Practice01_01 from "./sub_components/practice01_01";
import Practice01_02 from "./sub_components/practice01_02";
const NextPractice01 = () => {
return (
<div>
<Practice01_01/>
<Practice01_02/>
</div>
)
}
export default NextPractice01;
app/practice01/page.tsx
import NextPractice01 from "@/components/practice01";
const Practice01 = () => {
return (
<NextPractice01/>
)
}
export default Practice01;
page.tsx에서 불러올 컴포넌트의 이름이 index.tsx면 임포트 경로에서 바로 직전 폴더명까지만 적어도 된다.
이 때 해당 페이지로 가는 경로는 localhost:3000/practice01 이 된다. 굳이 라우터로 지정하지 않아도 폴더만으로 경로가 자동 생성된다.
Layout의 경우 기존 리액트 처럼 따로 wrapper에 넣는게 아니라
Layout.tsx로 공통의 레이아웃을 정한다.
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
export default function RootLayout({children,}: {children: React.ReactNode;}) {
return (
<html lang="ko">
<body>
<Header/>
{children}
<Footer/>
</body>
</html>
);
}
여기서 children은 app 폴더에 있는 page.tsx이 들어간다.
next.js에서 Link는 리액트와 달리 to와 state 대신 href와 query를 사용
리액트
<Link to="경로" state={{보낼 데이터}}>
next
<Link href="경로" query={보낼 데이터}>
오늘은 여기까지
'Next.js + TypeScript' 카테고리의 다른 글
| TypeScript 두 번째 (1) | 2025.07.22 |
|---|---|
| TypeScript 첫 번째 (3) | 2025.07.22 |
| Next.js 두 번째 (0) | 2025.07.22 |