[Next.js + TS] 2. 프로젝트 만들고 폴더 구조 이해하기

1편에서 “왜 Next + TS인지”를 봤다면, 이번 편은 실제로 프로젝트를 띄우고 폴더를 열어보는 시간입니다.
목표: create-next-app → 실행 → app/page.tsx 문구 바꾸기까지.

이 편에서 할 일

Next.js + TypeScript 프로젝트 생성
로컬에서 실행해 보기
app/ 폴더 구조 읽기
홈 화면 문구를 바꿔 “여기가 페이지다”를 몸으로 익히기

설치만 하고 끝내면 금방 까먹습니다.
한 줄이라도 직접 고쳐 보는 것이 이번 편의 실습입니다.

사전 준비

아래가 있으면 됩니다.

Node.js (LTS 권장, 18 이상)
터미널 (PowerShell, cmd, 또는 VS Code/Cursor 터미널)
코드 에디터

버전 확인:

node -v
npm -v

숫자가 나오면 OK입니다.

프로젝트 만들기

터미널에서 원하는 폴더로 이동한 뒤:

npx create-next-app@latest memo-app

질문에 대략 이렇게 답하면 이 시리즈와 맞습니다.

질문	추천 답
TypeScript?	Yes
ESLint?	Yes
Tailwind CSS?	Yes (있어도 되고, 없어도 됨)
`src/` directory?	No (처음엔 `app/`이 루트에 있는 편이 단순)
App Router?	Yes
Turbopack?	Yes여도 무방
import alias (`@/*`)?	Yes

생성이 끝나면:

cd memo-app
npm run dev

브라우저에서 http://localhost:3000 을 엽니다.
Next 기본 시작 화면이 보이면 성공입니다.

왜 이 명령어인가

npx: 패키지를 전역 설치하지 않고 실행
create-next-app: Next 공식 스캐폴딩 도구
@latest: 최신 템플릿 사용

직접 package.json을 손으로 조립해도 되지만,
처음에는 공식 템플릿으로 시작하는 게 삽질이 적습니다.

폴더 구조, 지금 볼 것만

생성된 프로젝트에서 지금은 이것만 보면 됩니다.

memo-app/
  app/
    layout.tsx
    page.tsx
    globals.css
  public/
  package.json
  tsconfig.json
  next.config.ts   (또는 next.config.mjs)

`app/`

App Router의 중심입니다.
페이지와 레이아웃이 여기 있습니다.

`app/page.tsx`

/ (홈) 화면입니다.
이 파일의 return JSX가 브라우저에 보입니다.

`app/layout.tsx`

모든 페이지를 감싸는 공통 틀입니다.
<html>, <body>, 공통 폰트, 나중에 넣을 헤더 같은 것이 여기로 옵니다.

`app/globals.css`

전역 스타일입니다.
이번 시리즈에서는 깊게 안 들어가도 됩니다.

`package.json`

스크립트와 의존성 목록입니다.
npm run dev가 여기서 정의됩니다.

`tsconfig.json`

TypeScript 설정입니다.
지금은 “TS가 켜져 있다” 정도만 알면 충분합니다.

`public/`

이미지, 파비콘처럼 그대로 서빙할 정적 파일 자리입니다.

핵심 파일 열어보기

1) `app/layout.tsx`

대략 이런 형태입니다. (버전마다 세부 표현은 조금 다를 수 있음)

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

포인트:

children = 각 page.tsx가 들어가는 자리
홈이든 /memos든, 결국 이 레이아웃 안에 렌더됩니다

2) `app/page.tsx`

기본 템플릿에는 데모 UI가 잔뜩 들어 있습니다.
우리는 메모 앱의 홈으로 바꿀 겁니다.

실습: 홈 화면 문구 바꾸기

app/page.tsx를 아래처럼 간단하게 교체합니다.

export default function HomePage() {
  return (
    <main>
      <h1>Memo App</h1>
      <p>Next.js + TypeScript 시리즈 실습 프로젝트</p>
    </main>
  );
}

저장 후 브라우저를 보면:

제목이 Memo App
아래 설명 문구

로 바뀌어 있어야 합니다.

이게 이번 편의 핵심 체감입니다.

app/page.tsx를 고치면 /가 바뀐다.

React에서 컴포넌트를 수정하는 감각과 같습니다.
차이점은 이 파일이 곧 라우트라는 점입니다.

`layout`과 `page` 관계 (그림으로)

layout.tsx
└─ page.tsx   ← 지금 고친 홈

나중에 /memos를 만들면:

layout.tsx
├─ page.tsx          → /
└─ memos/page.tsx    → /memos

공통 헤더를 layout.tsx에 넣으면 두 페이지에 다 보입니다.
(헤더는 4편에서 본격적으로 다룹니다.)

자주 하는 실수

1. 서버가 안 떠 있는데 브라우저만 새로고침
→ 터미널에서 npm run dev가 켜져 있는지 확인

2. 다른 폴더의 파일을 수정
→ 지금 실행 중인 memo-app 안의 app/page.tsx인지 확인

3. 저장을 안 함
→ 에디터에 흰 점(미저장) 표시가 있으면 Ctrl+S

4. 포트가 이미 사용 중
→ localhost:3000 대신 터미널에 나온 다른 포트(예: 3001)로 접속

이 편에서 가져갈 것

Next 프로젝트는 create-next-app으로 시작하는 게 가장이다
App Router의 중심은 app/이다
page.tsx = 그 경로의 화면
layout.tsx = 화면들을 감싸는 공통 틀
홈을 바꾸려면 app/page.tsx를 고치면 된다

다음 편 예고

[Next.js + TS] 3. TypeScript로 컴포넌트 타입 잡기

props에 타입 붙이기
메모 카드 같은 작은 컴포넌트 만들기
Memo 타입을 실제로 화면에 연결하기

다음 편부터 “폴더만 있는 상태”에서 타입이 있는 UI 조각으로 넘어갑니다.

시리즈 목차

왜 Next.js + TypeScript인가
프로젝트 만들고 폴더 구조 이해하기 ← 지금
TypeScript로 컴포넌트 타입 잡기
라우팅과 레이아웃
Server Component vs Client Component
데이터 가져오기
폼과 서버 액션 입문
정리 + 다음 학습 로드맵

저작자표시 (새창열림)

'frontend > NextJs' 카테고리의 다른 글

# [Next.js + TS] 6. 데이터 가져오기 (0)	2026.07.29
# [Next.js + TS] 5. Server Component vs Client Component (0)	2026.07.29
# [Next.js + TS] 4. 라우팅과 레이아웃 (0)	2026.07.29
# [Next.js + TS] 3. TypeScript로 컴포넌트 타입 잡기 (0)	2026.07.29
[Next.js + TS] 1. 왜 Next.js + TypeScript인가 (0)	2026.07.29

[Next.js + TS] 2. 프로젝트 만들고 폴더 구조 이해하기

이 편에서 할 일

사전 준비

프로젝트 만들기

왜 이 명령어인가

폴더 구조, 지금 볼 것만

app/

app/page.tsx

app/layout.tsx

app/globals.css

package.json

tsconfig.json

public/