NextJS 정리

1. 📌Next.js란?

• Next.js 개요
• React와의 차이점
• 어떤 문제를 해결해주는가?

2. ⚙️ 프로젝트 구조와 설정

• 기본 디렉토리 구조 (app/ , pages/ , public/ , styles/ , components/ )
• next.config.js 설정 상세
• TypeScript 적용
• 환경 변수 관리 (.env.local , .env.production 등)

3. 🚀 렌더링 방식 완전 정복

• CSR(Client Side Rendering)
• SSR(Server Side Rendering)
• SSG(Static Site Generation)
• ISR(Incremental Static Regeneration)

4. 🛣️ 라우팅 시스템

• pages/ 기반 라우팅
• app/ 디렉토리 기반 라우팅 (App Router)
• 동적 라우팅 ([slug].tsx )
• Catch-all routes ([…params].tsx )
• 미들웨어 (Middleware)

5. 📦 데이터 패칭 전략

• getServerSideProps
• getStaticProps / getStaticPaths
• useEffect vs getInitialProps
• 서버 컴포넌트와 fetch 활용
• React Query / SWR 적용

6. 🔐 인증 & 권한 처리

• JWT 인증 전략
• NextAuth.js 통합
• 미들웨어를 통한 라우팅 보호
• 클라이언트 / 서버 측 인증 흐름

7. 📈 SEO 및 성능 최적화

• Head 태그 (next/head )
• 메타 태그 최적화
• OpenGraph / SNS 공유 최적화
• Image 최적화 (next/Image )
• 코드 스플리팅과 lazy loading
• LightHouse 기준 성능 개선

8. 💅 스타일링 방법 정리

• CSS Modules
• Tailwind CSS 적용
• Styled-components, Emotion
• 글로벌 스타일 설정

---

📌 1. Next.js란?

Next.js 개요

Next.js는 React 기반의 프레임워크로, 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR)을 유연하게 조합할 수 있는 하이브리드 프레임워크 이다

• 개발자는 페이지 단위로 작성만 해도 라우팅, 빌드, 렌더링까지 자동 처리 가능
• SEO에 최적화된 React 앱을 만들기 위한 대표적인 솔루션

Next.js의 핵심 특징

🔷 React와 Next.js의 차이점

---

⚙️ 2. 프로젝트 구조와 설정

📁 기본 디렉토리 구조

pages/ vs app/

• pages/: 기존의 라우팅 방식 (Next.js 12 이하 기본 방식)
• app/: 최신 App Router 기반 (Next.js 13부터 공식 도입)

예시: pages/ 기반 구조

plain
perl
코드 복사
my-next-app/
├── pages/
│   ├── index.tsx        ← 루트 경로 (/)
│   ├── about.tsx        ← /about 경로
│   └── blog/
│       └── [slug].tsx   ← 동적 라우팅 (/blog/글제목)
├── public/              ← 정적 자산 (이미지, 폰트 등)
├── styles/              ← 글로벌/모듈 CSS
├── components/          ← 재사용 가능한 컴포넌트
├── next.config.js       ← Next.js 설정 파일
└── tsconfig.json        ← TypeScript 설정

예시: app/ 기반 구조 (Next.js 13+)

plain
lua
코드 복사
my-next-app/
├── app/
│   ├── layout.tsx       ← 모든 페이지 공통 레이아웃
│   ├── page.tsx         ← 루트 페이지
│   ├── about/
│   │   └── page.tsx     ← /about 경로
│   └── blog/
│       └── [slug]/
│           └── page.tsx ← /blog/동적경로
├── public/
├── components/
├── next.config.js
└── tsconfig.json

app/ 디렉토리는 서버 컴포넌트 지원, 중첩 레이아웃, Streaming, 로딩 상태 분리 등의 기능을 사용할 수 있습니다. 앞으로는 app/ 사용을 권장합니다.

⚙️ next.config.js 기본 설정

Next.js의 핵심 환경 설정 파일입니다.

plain
js
코드 복사
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'], // 외부 이미지 도메인 허용
  },
  async redirects() {
    return [
      {
        source: '/old-route',
        destination: '/new-route',
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

자주 쓰는 옵션들

---

📦 TypeScript 적용

npx create-next-app@latest --typescript 로 프로젝트를 생성하면 자동 설정됩니다.

기존 JS 프로젝트를 TS로 전환할 땐 tsconfig.json 파일만 추가해도 됨. Next.js가 자동 설정.

---

🧪 ESLint & Prettier 설정 (권장)

shell
bash
코드 복사
npm install --save-dev eslint prettier eslint-config-next

.eslintrc.json 예시:

json
json
코드 복사
{
  "extends": "next/core-web-vitals"
}

.prettierrc 예시:

json
json
코드 복사
{
  "singleQuote": true,
  "semi": true}