Next.js 시작하기

728x90

CH 1. Next.js 16 기본 구조 및 정적 UI 구축

1-1. React와 Next.js의 차이점

React는 UI를 만들기 위한 라이브러리. 기본적으로 클라이언트 측 렌더링(CSR)만 지원.
Next.js는 React를 기반으로 하며, 개발에 필요한 모든 기능(라우팅, 데이터 페칭, 빌드 시스템)을 갖춘 풀스택 프레임워크.
서버 측 렌더링(SSR), 정적 생성(SSG) 등 다양한 렌더링 방식을 기본으로 제공
- SEO(검색엔진 최적화)에 유리
- 더 빠른 로딩 지원 (클라이언트 로드 부담 감소 )
Server Component를 통해 서버와 클라이언트의 경계를 명확히 구분하여 성능을 최적화함.

1-2 todo 개발 범위

Read (읽기): ToDo 리스트를 서버에서 가져와 보여줌.
간단한 토글 : ToDo 완료 표시
Create (생성): 새로운 ToDo 항목을 추가함.

1-3. ToDo 앱 예시: 기본 환경 설정 및 정적 레이아웃 (실습)

프로젝트 생성 및 실행:

npx create-next-app@latest todo-app
cd todo-app
npm run dev

1-4. Next.js 설치 및 디렉토리 구조 설명

파일/디렉토리설명

todo-app/	프로젝트의 루트 디렉토리.
app/	App Router의 핵심 디렉토리. 라우팅, 레이아웃, 페이지 컴포넌트가 위치함.
app/layout.js	루트 레이아웃. 전체 앱에 적용되며 <html > 구조를 포함.
app/page.js	특정 경로의 고유 UI (페이지). / (메인 경로)에 해당함. page.js 파일이 있으면 route 경로로 자동인식됨. 예) app/dashboard/page.js -> http://code.com/dashboard
public/	이미지, 폰트 등 정적 파일을 저장하는 디렉토리.
.next/	빌드 결과물이 저장되는 디렉토리. 개발 중에는 신경 쓸 필요 없음.
node_modules/	프로젝트의 종속성(패키지)이 저장되는 디렉토리
package.json	프로젝트의 이름, 버전, 스크립트, 설치된 패키지 목록(종속성)이 정의됨
next.config.js	Next.js 프레임워크의 설정 파일

1-5 Root Layout (app/layout.js)

app/layout.tsx는 Root Layout으로, Next.js 앱의 최상위 UI를 정의.

전체 HTML 구조(<html>, <body>)를 설정.

이 컴포넌트 내부에 정의된 UI는 모든 페이지에 걸쳐 공유됨.

{children} 속성은 현재 경로에 해당하는 페이지(page.tsx)나 하위 레이아웃을 렌더링할 위치를 지정함.

실습: ToDo 앱 전체에 적용될 Header와 기본 스타일링을 Root Layout에 추가함.

import './globals.css';


// children을 활용해서 렌더링.
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <header style={{ padding: '20px',borderBottom: '1px solid #eee',textAlign:'center' }}>
          <h1>Next.js ToDo App</h1>
        </header>
        <main style={{ maxWidth: '600px', margin: '20px auto', padding: '0 20px' }}>
          {children}
        </main>
      </body>
    </html>
  );
}

1-6 메인 페이지수정:

app/page.js
일단 껍데기만.

// app/page.js
export default function HomePage() {
  return (
    <div>
      <h2>나의 할 일 목록</h2>
      <p>여기에 ToDo 추가 폼이 들어갈 예정</p>
    </div>
  )
}

Ch2. Server Component를 이용한 data fetching

React Server Component 이해

기존 data fetching 방식은 전형적인 클라이언트 렌더링에 필요한 방식이였음.
- document요청 -> JS 응답 / 다운로드 -> JS해석-> API 요청 -> 서버 API 처리 / 응답 -> 클라이언트 수신 -> 파싱 -> 렌더링
SSR방식은 이미 서버에서 처리하는 방식이였음.
- document 요청 -> 서버에서 모든 처리 -> HTML 응답 -> 빠른 렌더링
Server component는 클라이언트 패칭을 없애고 서버에서 data 획득/리액트 부분 렌더링 이후에 결과를 클라에게 전달.
Client 컴포넌트와 Server 컴포넌트가 공존하는 형태.
- 위 app/page.tsx 가 이미 서버컴포넌트.

React Server Component(RSC)는 서버에서 실행되며, async 함수 표현이 가능하다.
- async/await를 사용하여 데이터를 직접 가져옴.
RSC는 클라이언트 측 렌더링(CSR)에서 발생하는 추가적인 네트워크 요청을 줄임.
- 클라이언트 내려받는 번들 사이즈 작아짐
- 복잡한 클라이언트 로직 감소
RSC를 위해서는 서버사이드 관리가 필요함.

ToDo 목록 가져와 보여주기

데이터 서비스 함수 생성

src/lib/types.ts
타입 정의 하나 해두기.

export type Todo = {
  id: string;
  title: string;
  isCompleted: boolean;
};

src/lib/todos.ts
서버컴포넌트 코드로 서버 응답을 모의로 작성.
- 원래는 DB연결등 필요..

import { Todo } from './types';

export async function getTodos(): Promise<Todo[]> {
  console.log('--- [서버 로그] ToDo 데이터를 서버에서 패칭 중 ---');

  // 실제 API 호출을 시뮬레이션. 데이터 하드코딩해서 반환. 
  await new Promise(resolve => setTimeout(resolve, 1000)); // 대충 1초 지연
  return [
    { id: '1', title: 'Next.js 튜토리얼 준비', isCompleted: false },
    { id: '2', title: '코드 리뷰 진행', isCompleted: true },
    { id: '3', title: '점심 식사 예약', isCompleted: false },
  ];
}

메인 페이지 (app/page.tsx) 수정

app/page.tsx
getTodo함수를 호출해서 데이터 받아서 렌더링.
- async 함수라고 await로 받을 수가 있음.

import { getTodos } from '@/lib/todos';
import { Todo } from '@/lib/types'; 

// async 함수형 컴포넌트 정의 (Server Component)
export default async function HomePage() {
  const todos: Todo[] = await getTodos(); // 서버 컴포넌트에서 직접 데이터 패칭
  console.log('--- [서버 로그] ToDo 목록 렌더링 완료 ---');

  return (
    <div>
      <h2>나의 할 일 목록</h2>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} style={{ textDecoration: todo.isCompleted ? 'line-through' : 'none', margin: '8px 0' }}>
            {todo.title}
          </li>
        ))}
      </ul>
      {/* ToDo 추가 폼은 다음 챕터에서 구현 */}
    </div>
  );
}

확인할 것
- 터미널 창에서 [서버 로그]가 찍히는지 확인.
- 개발자 도구의 '네트워크' 탭에서 메인 페이지 요청(localhost:3000)의 응답(Response/Payload)을 확인.
  - 응답 HTML 내부에 이미 ToDo 목록이 포함되어 있음을 확인.

Ch 3. Client Component로 인터랙션 추가

Client Component는 브라우저에서 렌더링됨
반드시 파일 상단에 'use client' 지시어를 선언해야 함.
useState, useEffect, onClick 등 클라이언트 상태 관리가 필요한 경우에 사용.

ToDo 앱 예시: ToDo 항목 완료/미완료 상태 토글 (UI동작만)

Client Component 생성

src/components/TodoItem.tsx 생성

'use client';

import { useState } from 'react';
import { Todo } from '@/lib/types';


interface TodoItemProps {
  initialTodo: Todo;
}

export default function TodoItem({ initialTodo }: TodoItemProps) {
  const [todo, setTodo] = useState<Todo>(initialTodo);

  const handleToggle = () => {
    // 우선 클라이언트 상태만 변경해서 렌더링.(서버 반영하지 않음)
    setTodo(prev => ({ ...prev, isCompleted: !prev.isCompleted }));
  };

  return (
    <li style={{ listStyle: 'none', display: 'flex', alignItems: 'center', margin: '8px 0' }}>
      <input
        type="checkbox"
        checked={todo.isCompleted}
        onChange={handleToggle}
        style={{ marginRight: '10px' }}
      />
      <span style={{ textDecoration: todo.isCompleted ? 'line-through' : 'none' }}>
        {todo.title}
      </span>
    </li>
  );
}

메인 페이지 (app/page.tsx)에 Client Component import

app/page.tsx 수정

import { getTodos } from '@/lib/todos';
import TodoItem from '@/components/TodoItem'; // Client Component import
import { Todo } from '@/lib/types';

export default async function HomePage() {
  const todos: Todo[] = await getTodos();

  return (
    <div>
      <h2>나의 할 일 목록</h2>
      <ul style={{ padding: 0 }}>
        {todos.map(todo => (
          // Server Component가 Client Component를 렌더링 (데이터 전달)
          <TodoItem key={todo.id} initialTodo={todo} />
        ))}
      </ul>
    </div>
  );
}

Ch 4. Server Actions를 이용한 데이터 변경(Mutation)

Server Actions는 API Route 없이 클라이언트 폼에서 직접 서버 측 함수를 호출하여 데이터를 변경(Mutation)하는 기능.
- API Route 는 API를 생성하는 Server side 코드
'use server' 지시어를 사용해야 함,
데이터 변경 후 revalidatePath를 이용해 해당 경로의 캐시를 무효화하면 페이지가 자동으로 re-fetch되고 UI가 갱신됨.

ToDo 앱 예시: 새로운 ToDo 항목 추가

데이터 서비스 함수 수정

src/lib/todos.ts

import { revalidatePath } from 'next/cache';
import { Todo } from './types';

const todos: Todo[] = [
  { id: '1', title: 'Next.js 튜토리얼 준비', isCompleted: false },
  { id: '2', title: '코드 리뷰 진행', isCompleted: true },
  { id: '3', title: '점심 식사 예약', isCompleted: false },
];

export async function getTodos(): Promise<Todo[]> {
  //...
  // todos 를 반환하도록 수정
  return todos;  
}

// 서버 액션 함수 ('use server' 선언)
// Server Action은 FormData를 인수로 받음
export async function addTodo(formData: FormData) {
  'use server';

  const title = formData.get('title') as string; // as string으로 타입 단언
  if (!title) return;

  todos.push({
    id: Date.now().toString(),
    title: title,
    isCompleted: false,
  });

  // 데이터가 변경되었으므로, 홈('/') 페이지 경로의 캐시를 무효화
  revalidatePath('/');
}

메인 페이지에 폼 추가:

app/page.tsx
// app/page.tsx (수정) import { getTodos, addTodo } from '@/lib/todos'; // Server Action import import TodoItem from '@/components/TodoItem'; import { Todo } from '@/lib/types'; export default async function HomePage() { const todos: Todo[] = await getTodos(); return ( <div> <h2>나의 할 일 목록</h2> <ul style={{ padding: 0 }}> {todos.map(todo => ( <TodoItem key={todo.id} initialTodo={todo} /> ))} </ul> {/* Server Action을 사용하는 폼 */} <form action={addTodo} style={{ marginTop: '20px' }}> <input type="text" name="title" placeholder="새로운 할 일" required style={{ padding: '8px', marginRight: '10px', border: '1px solid #ccc' }} /> <button type="submit" style={{ padding: '8px 15px', cursor: 'pointer' }}> 추가 </button> </form> </div> ); }

Ch 5. 서버컴포넌트 정리

Next.js 16은 Server Components와 Server Actions를 통해 풀스택 React 개발을 간소화함.

Pages Router에서 API Routes가 필요했던 데이터 변경 작업이 Server Actions로 대체되어 개발 생산성이 향상.

Server Component (SC):
- 서버에서만 실행되며, 데이터 페칭, DB 접근, 민감한 데이터 처리 등을 담당함. 브라우저로 전송되는 JavaScript 번들 크기를 줄여 초기 로딩 속도를 극대화함.
Client Component (CC):
- 브라우저에서 실행되며, 사용자 상호작용(클릭, 상태 관리 등)을 담당함. 반드시 'use client'를 명시해야 함.
Server Actions (SA):
- 클라이언트 측에서 API Route를 거치지 않고 직접 서버 측 함수를 호출하여 데이터를 변경함.
- revalidatePath를 통해 캐시를 자동으로 무효화하고 UI를 갱신함으로써, 클라이언트와 서버 간의 데이터 동기화 문제를 크게 단순화함.

Ch 6. Routing (라우팅)

Next.js 16의 라우팅은 app 디렉토리 기반의 파일 시스템 라우팅을 사용

1. 중첩 라우팅 (Nested Routing) 및 레이아웃 (Layouts)

폴더 구조 자체가 URL 경로를 정의하며, 폴더 안에 정의된 layout.tsx는 해당 경로와 하위 경로 모두에 적용되어 UI를 공유
- / 경로 외에 /settings 경로를 추가하고, next/link를 사용해 페이지를 이동.

파일 구조URL 경로설명

app/layout.tsx	(전체)	모든 페이지를 감싸는 최상위 레이아웃
app/page.tsx	/	ToDo 목록 페이지
app/settings/page.tsx	/settings	설정 페이지

app/settings/page.tsx 생성

export default function SettingsPage() {
  return <h2>설정 페이지 (추가 개발 필요)</h2>;
}

사용자가 /settings로 이동할 수 있도록 next/link 컴포넌트를 사용
app/page.tsx (수정)

import Link from 'next/link'; 

// ... HomePage 컴포넌트 정의

export default async function HomePage() {
  // ... (기존 ToDo 페칭 및 렌더링 로직)
  
  return (
    <div>
      {/* ... ToDo 리스트 및 폼 */}

      <Link href="/settings" style={{ display: 'block', marginTop: '20px' }}>
        설정으로 이동
      </Link>
    </div>
  );
}

2. 클라이언트 라우팅 훅(Hooks) 활용: 경로 파악 및 제어

next/navigation에서 제공하는 훅들은 Client Component에서만 사용할 수 있음
URL, 경로, 쿼리 파라미터 등을 읽거나 페이지 이동을 프로그래밍 방식으로 제어할 때 사용.
- 반드시 파일 상단에 'use client 를 선언한 Client Component 내에서만 사용

Hook용도사용 예시

usePathname	현재 요청된 URL의 경로(pathname)를 문자열로 읽음.	/settings 또는 /todos/123 파악
useRouter	프로그래밍 방식으로 페이지 이동을 제어.	router.push('/new-path')

현재 경로를 읽어 활성 링크를 강조하는 내비게이션 컴포넌트 생성

// components/Nav.tsx (새 파일)
'use client'; 

import Link from 'next/link';
import { usePathname } from 'next/navigation'; 

export default function Nav() {
  const pathname = usePathname(); 

  const links = [
    { href: '/', label: 'Todo 목록' },
    { href: '/settings', label: '설정' },
  ];

  return (
    <nav style={{ padding: '10px 0', display: 'flex', gap: '15px', justifyContent: 'center' }}>
      {links.map(link => (
        <Link 
          key={link.href}
          href={link.href}
          style={{ 
            // 💡 색상 수정: 기본은 #555, 활성화 시 #0070f3 (파란색)
            color: pathname === link.href ? '#0070f3' : '#555', 
            fontWeight: pathname === link.href ? 'bold' : 'normal',
            textDecoration: 'none'
          }}
        >
          {link.label}
        </Link>
      ))}
    </nav>
  );
}

모든 페이지의 헤더에 Nav 컴포넌트를 배치하여 경로 이동을 관찰

// app/layout.tsx (수정)
// ...
import Nav from '@/components/Nav'; 

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <header style={{ padding: '20px', borderBottom: '1px solid #eee', textAlign: 'center' }}>
          <h1>Next.js ToDo App</h1>
          <Nav /> {/* 헤더 내부에 Nav 배치 */}
        </header>
        <main style={{ maxWidth: '600px', margin: '20px auto', padding: '0 20px' }}>
          {children}
        </main>
      </body>
    </html>
  );
}

Ch 7. 리소스 최적화

Next.js의 <Image>와 next/font를 통한 리소스 최적화는 기본적으로 제공됨.

1. 이미지 최적화 (next/image)

<img /> 태그 대신 Next.js의 내장 <Image /> 컴포넌트를 사용해야 함.

이미지 크기를 자동으로 최적화하여 브라우저에 맞는 WebP/AVIF 같은 최신 포맷으로 변환함.
Lazy Loading(지연 로딩)이 기본 적용되어 뷰포트 바깥의 이미지는 로딩하지 않음.
app/layout.tsx (예시)

import Image from 'next/image'; // Image 컴포넌트 import
// ...

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <header style={{ display: 'flex', alignItems: 'center', padding: '20px', borderBottom: '1px solid #eee' }}>
          {/* public/logo.png를 가정 */}
          <Image src="/logo.png" alt="Logo" width={40} height={40} style={{ marginRight: '10px' }} />
          <h1>Next.js ToDo App</h1>
        </header>
        {/* ... main */}
      </body>
    </html>
  );
}

2. 폰트 최적화 (next/font)

next/font는 외부 네트워크 요청 없이 폰트 파일을 빌드 시점에 최적화하고 자동으로 호스팅하여 폰트 로딩으로 인한 레이아웃 이동(CLS, Cumulative Layout Shift)을 방지함.

사용법: Google Fonts 또는 Local Fonts를 import하여 사용함.

// app/layout.tsx (일부)
import { Inter } from 'next/font/google'; // Google Fonts 사용 예시

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    // font 변수를 className으로 body에 적용
    <html lang="ko" className={inter.className}>
      <body>
        {/* ... */}
      </body>
    </html>
  );
}

'💙 프론트엔드(FE)' 카테고리의 다른 글

프론트엔드 자잘한 피드백 (0)	2026.01.25
프론트엔드 테스트 도구 ( MSW, Vitest, React Testing Library ) (0)	2026.01.21
FE 디렉토리 구조(FE 아키텍쳐) (0)	2026.01.20
React 상태관리 ( 지역, 전역, 서버 컴포넌트 ) (0)	2026.01.20
React 성능 최적화 (0)	2026.01.20

CH 1. Next.js 16 기본 구조 및 정적 UI 구축

1-1. React와 Next.js의 차이점

1-2 todo 개발 범위

1-3. ToDo 앱 예시: 기본 환경 설정 및 정적 레이아웃 (실습)

1-4. Next.js 설치 및 디렉토리 구조 설명

1-5 Root Layout (app/layout.js)

1-6 메인 페이지수정:

Ch2. Server Component를 이용한 data fetching

React Server Component 이해

ToDo 목록 가져와 보여주기

Ch 3. Client Component로 인터랙션 추가

ToDo 앱 예시: ToDo 항목 완료/미완료 상태 토글 (UI동작만)

Ch 4. Server Actions를 이용한 데이터 변경(Mutation)

ToDo 앱 예시: 새로운 ToDo 항목 추가

Ch 5. 서버컴포넌트 정리

Ch 6. Routing (라우팅)

1. 중첩 라우팅 (Nested Routing) 및 레이아웃 (Layouts)

2. 클라이언트 라우팅 훅(Hooks) 활용: 경로 파악 및 제어

Ch 7. 리소스 최적화

1. 이미지 최적화 (next/image)

2. 폰트 최적화 (next/font)

'💙 프론트엔드(FE)' 카테고리의 다른 글

티스토리툴바