Next.js 특징과 기본 구조

Next.js란?

공식문서에서는 Next.js는 풀스택 웹 애플리케이션을 만들기 위한 리액트 프레임워크라고 명시되어있습니다. 

Next.js는 Vercel에서 개발한 React기반의 웹 개발 프레임워크로 React로 유저 인터페이스를 만든다면
Next.js는 그 외 추가적인 기능과 최적화에 도움을 주는 도구입니다.

 

Next.js의 주요 특징

1.  라우팅 (Routing)

공식문서 - 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터입니다.

 

React의 경우 라우터를 제공하지 않아 react-router-dom을 이용하게 되는데요. 
이와 달리 Next.js는 파일 기반 라우팅을 지원합니다.

- 정적 라우팅: 디렉토리 안에 파일을 생성하면 해당 파일 경로가 자동으로 웹 애플리케이션의 URL 경로가 됩니다.

ex) main.js 파일을 생성하면 자동으로 /main 경로가 생성

- 동적 라우팅: 파일이나 폴더 이름에 대괄호([])를 사용하여 동적인 URL을 처리할 수 있습니다.

ex) pages/posts/[id].js 또는 app/blog/[slug]/page.js)

 

2. 렌더링 (Rendering)

공식문서 - 클라이언트 컴포넌트와 서버 컴포넌트를 활용하여 클라이언트 렌더링과 서버 렌더링을 모두 지원합니다.
또한 Next.js를 사용해 정적 렌더링(Static Rendering)과 동적 렌더링(Dynamic Rendering)을 통해 서버 측 최적화를 수행합니다.

이 모든 렌더링은 Edge 런타임과 Node.js 런타임에서 스트리밍 방식으로 처리됩니다.

 

 

1. 클라이언트 렌더링 (CSR) : 브라우저가 사용자 화면을 렌더링하는 방식 (JS 실행 이후 보여짐)

브라우저가 렌더링 하기 때문에 만약 사용자가 example.com/dashboard에 들어가면, 브라우저는 빈 HTML과 JS 번들을 받음

이렇게 JS 실행 후에 화면이 보이기 때문에 초기 로딩이 느릴 수 있습니다.

 

 

 

2. 서버 렌더링 (SSR): 서버에서 HTML을 미리 만들어 사용자에게 전달하는 방식 (더 빠르게 보임)

HTML을 서버에서 생성하여 사용자에게 바로 전달하기 때문에 첫 페이지 로딩이 비교적 빠르고, SEO에도 좋은 장점이 있습니다.

 

 

3. 클라이언트/서버 컴포넌트: Next.js 13 이상에서는 어떤 컴포넌트가 브라우저에서 실행될지, 서버에서만 처리될지 구분 가능

컴포넌트를 서버에서만 동작할지, 브라우저에서도 동작할지 선택할 수 있도록 합니다.

예시) 

• 클라이언트 컴포넌트: 좋아요 버튼 같은 사용자 인터랙션이 필요하기 때문에 클라이언트 컴포넌트가 유리
• 서버 컴포넌트: 로그인 여부에 따라 다르게 바뀌게 보이는 대시보드 컴포넌트 같은 경우 서버 컴포넌트가 유리

 

4. 정적 렌더링 (SSG): 빌드 시 HTML을 미리 생성해 빠르게 제공

페이지 빌드 시 미리 생성해두고 정적으로 제공합니다.

예시) 회사 소개 페이지

• 내용이 자주 바뀌지 않음 → 빌드 시 HTML 생성
• 서버 부하가 없고 속도 빠름
• 예: about, teams, information 같은 정적 페이지

 

5. 동적 렌더링: 요청 시 서버에서 최신 데이터를 기반으로 HTML 생성

요청 할 때마다 최신 데이터를 기반으로 HTML 생성

예시) 주식 가격, 실시간 날씨 페이지

• 사용자가 페이지 요청할 때마다 서버가 새로운 데이터를 가져와서 HTML 생성
• 예: stock-price, weather

 

6. 스트리밍: 페이지를 한 번에 다 불러오는 게 아니라, 필요한 부분부터 점진적으로 보내주는 기술 (빠르게 첫 화면 제공)

페이지 전체가 아니라 일부부터 점진적으로 렌더링

예시) 쇼핑몰 홈 화면

• 상단 배너와 인기 상품은 먼저 보여주고, 나머지 섹션은 나중에 불러옴
• 사용자는 페이지가 전부 로드되기 전에도 상호작용 가능
• 예: 유튜브, 넷플릭스의 초기 로딩

 

7. Edge 런타임: 사용자 근처 서버(Cloudflare, Vercel 등)에서 처리해 지연을 줄이는 방식

사용자의 위치에 가까운 서버에서 처리 → 빠른 응답
예시) 전 세계 사용자 대상의 로그인 처리

• 한국 사용자는 서울의 서버에서, 유럽 사용자는 프랑크푸르트에서 처리
• 지연 시간(Latency)을 줄여 빠른 UX 제공
• 예: Cloudflare Workers, Vercel Edge Functions

 

 

 

3.  데이터 페칭 (Data fetching)

공식문서 - 서버 컴포넌트에서의 async/await를 사용한 데이터 가져오기, 확장된 fetch API(API 요청 메모이제이션, 데이터 캐싱)

 

1. Server Components에서 async/await로 더 간단한 데이터 요청

• 서버 컴포넌트에서 async/await를 사용해 데이터를 직관적이고 간단하게 불러올 수 있습니다.
• 별도로 클라이언트 상태를 신경 쓸 필요 없이, 서버에서 다음 예시와 같이 필요한 데이터를 가져와 바로 렌더링 가능.

// Server Component
async function ProductList() {
  const res = await fetch("https://api.example.com/products");
  const products = await res.json();
  return <ul>{products.map(p => <li>{p.name}</li>)}</ul>;
}

2. Request Memoization (요청 메모이제이션)

• 같은 요청을 여러 번 하면, 결과를 캐싱해서 재사용
• 서버 리소스 절약 & 속도 향상

예시) 여러 컴포넌트에서 같은 API를 호출해도 fetch는 한 번만 일어남

3. Data Caching (데이터 캐싱)

• 요청 결과를 일정 시간 저장해서 재사용
• 네트워크 비용 절감 & 빠른 응답 제공

예시) 인기 블로그 글 목록은 10분 동안 캐싱됨 → 여러 사용자가 접근해도 빠르게 응답

 

4. 스타일링 (Styling)

공식문서 - CSS 모듈, Tailwind CSS, CSS-in-JS와 같은 다양한 스타일링 방법 지원

 

1.  CSS Modules

• 각 컴포넌트에 고유한 클래스 이름을 자동으로 부여해주는 방식
• 전역 클래스 충돌 방지 가능
• 일반 CSS 문법 사용 가능 (.module.css 확장자)

2. Tailwind CSS

• 유틸리티 기반의 CSS 프레임워크
• HTML 안에서 클래스 이름만으로 디자인 가능 → 빠르게 UI 구성

3.  CSS-in-JS (예: styled-components, Emotion 등)

• 자바스크립트 코드 안에 CSS를 작성하는 방식
• 조건부 스타일링이나 변수 사용에 유리

 

5. 최적화 (Optimizations)

공식문서 - 이미지, 폰트, 스크립트 최적화를 통해 애플리케이션의 성능과 사용자 경험 개선

 

1. 이미지 최적화 (Image Optimization)

• next/image 컴포넌트를 사용하면 이미지가 자동으로 최적화됩니다.
  (예: 크기 조절, 포맷 변경, 지연 로딩 등)

2. 폰트 최적화 (Font Optimization)

• Next.js는 구글 폰트 등 외부 폰트를 효율적으로 불러올 수 있도록 최적화합니다.
  (Next.js 13 이상에서는 next/font API 사용)

3. 스크립트 최적화 (Script Optimization)

• 외부 스크립트는 next/script를 통해 지연 로딩, 비동기 로딩 가능
• 렌더링 차단 없이 필요한 시점에만 실행되도록 제어 가능

6. 타입스크립트 (TypeScript)

공식문서 - Next.js는 TypeScript에 대한 지원을 강화하여 더 정확한 타입 검사, 더 빠른 컴파일, 그리고 커스텀 플러그인과 타입 검사기를 제공합니다.

• Next.js는 내부적으로 SWC라는 초고속 컴파일러를 사용해 TypeScript를 변환합니다. (SWC는 GO로 작성되었다고 합니다.)

 

Next.js 기본구조

my-next-app/
├── app/
│   ├── page.tsx            👉 홈 페이지 컴포넌트
│   ├── layout.tsx          👉 모든 하위 페이지에 공통 적용되는 레이아웃
│   └── about/
│       ├── page.tsx        👉 /about 경로의 페이지
├── public/                 👉 정적 파일 저장 (이미지, 폰트 등)
├── styles/                 👉 CSS 또는 Tailwind 설정 등
├── next.config.js          👉 Next.js 설정 파일
├── package.json            👉 프로젝트 종속성 및 스크립트
└── tsconfig.json           👉 TypeScript 설정 (TS 사용 시)

1. app/ 디렉토리 (Next.js 13+ 기준)

• page.tsx: 특정 경로의 페이지를 정의
  • /page.tsx는 루트 경로(/)
  • /about/page.tsx는 /about 경로
• layout.tsx: 해당 디렉토리 이하 모든 페이지에 적용될 공통 레이아웃 (ex. 헤더, 푸터)
• NOTE: 기존에는 pages/ 폴더를 사용했지만, Next.js 13부터는 app/ 디렉토리를 사용하는 App Router가 권장된다고 합니다.

2. public/

• 정적 파일을 두는 곳 (/favicon.ico, /logo.png 등)
• URL로 접근 가능 (/logo.png)

3. styles/

• 전역 스타일 (globals.css) 또는 Tailwind 설정이 위치

4. 설정 파일들

• next.config.js: Next.js 설정 커스터마이징
• package.json: npm 패키지와 스크립트 정의
• tsconfig.json: TypeScript 설정 (TS 사용 시)