Next.js 기초 <19. Next.js 15에서 유지보수 및 디버깅 전략>

넥스트 Next.js

19. Next.js 15에서 유지보수 및 디버깅 전략 

 

안녕하세요! 태마입니다.

Next.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

넥스트 Next.js

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. Next.js 15에서 유지보수가 중요한 이유

Next.js 프로젝트가 커질수록 코드 품질 유지 및 유지보수 전략이 필수적이다.
올바른 코드 스타일, 성능 최적화, 디버깅 툴을 활용하면 프로젝트의 확장성을 높이고, 버그를 줄일 수 있다.

📌 Next.js 15에서 유지보수를 고려해야 하는 주요 요소
✔ 코드 스타일 통일 (ESLint, Prettier) → 일관된 코드 작성
✔ 타입 안정성 확보 (TypeScript, Zod) → 코드 안정성 유지
✔ 로깅 및 모니터링 (Sentry, LogRocket) → 실시간 에러 감지 및 분석
✔ 빌드 및 배포 자동화 (CI/CD, GitHub Actions) → 효율적인 배포 및 코드 품질 유지

✅ Next.js 15 유지보수 전략 비교

전략설명장점단점

ESLint & Prettier	코드 스타일 통일	✅ 가독성 향상	❌ 설정 필요
TypeScript 적용	타입 안정성 강화	✅ 버그 방지	❌ 학습 필요
로깅 및 모니터링 (Sentry)	실시간 에러 감지	✅ 유지보수 용이	❌ 추가 비용 발생 가능
CI/CD 적용	자동 빌드 & 배포	✅ 배포 오류 감소	❌ 설정 복잡 가능

📌 Next.js 15에서는 "ESLint + TypeScript + Sentry + CI/CD" 조합이 가장 많이 사용됨!

---

2. Next.js 15에서 코드 스타일 통일하기

✅ 1) ESLint 및 Prettier 설치 및 설정

$ npm install --save-dev eslint prettier eslint-config-next

📌 ESLint와 Prettier를 설치하여 코드 스타일을 유지할 수 있음!

✅ 2) .eslintrc.json 설정

{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    "react/jsx-curly-brace-presence": ["error", "never"]
  }
}

📌 Next.js 15에서 기본 ESLint 규칙을 사용하며, Prettier와 함께 사용 가능!

✅ 3) .prettierrc 설정

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

📌 Prettier를 활용하여 일관된 코드 포맷을 유지할 수 있음!

✅ 4) 코드 자동 포맷 적용 (package.json 설정)

"scripts": {
  "lint": "eslint . --ext js,jsx,ts,tsx",
  "format": "prettier --write ."
}

📌 npm run lint와 npm run format을 실행하면 코드 스타일 자동 적용 가능!

---

✅ 여기까지 Next.js 15에서 유지보수를 위한 코드 스타일 관리 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 실시간 에러 감지 및 모니터링을 적용하려면?"
✅ 2부에서 Sentry 및 로깅 시스템을 활용한 에러 감지 및 분석 방법을 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. Next.js 15에서 Sentry를 활용한 실시간 에러 감지

✅ 1) Sentry 설치 및 설정

$ npm install --save @sentry/nextjs
$ npx @sentry/wizard -i nextjs

📌 Sentry를 설치하면 Next.js 15의 에러를 자동으로 추적 가능!

✅ 2) Sentry 설정 (sentry.config.ts)

import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  tracesSampleRate: 1.0,
});

📌 Sentry를 초기화하면 프로젝트의 에러를 자동으로 수집 가능!

✅ 3) 글로벌 에러 핸들링 적용 (app/error.tsx)

"use client";
import * as Sentry from "@sentry/nextjs";

export default function ErrorBoundary({ error }: { error: Error }) {
  Sentry.captureException(error);
  return <h1>⚠️ 오류가 발생했습니다!</h1>;
}

📌 Sentry를 활용하면 에러가 발생할 경우 자동으로 보고 가능!

✅ 4) Sentry에서 에러 확인
1️⃣ Sentry 대시보드 → Project 생성 후 DSN 설정
2️⃣ Next.js 프로젝트에 .env.local 파일 추가

SENTRY_DSN=https://your-sentry-dsn-url

3️⃣ Vercel 또는 서버 배포 후 Sentry에서 에러 발생 여부 확인

📌 Sentry를 활용하면 배포된 서비스에서 발생한 에러를 실시간으로 모니터링 가능!

---

2. Next.js 15에서 CI/CD를 활용한 자동 배포 및 테스트

✅ 1) GitHub Actions를 활용한 CI/CD 설정 (.github/workflows/deploy.yml)

name: Deploy to Vercel

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Install dependencies
        run: npm install

      - name: Run ESLint
        run: npm run lint

      - name: Run tests
        run: npm test

      - name: Deploy to Vercel
        run: vercel --prod

📌 GitHub에 main 브랜치에 코드 푸시 시 자동으로 Vercel에 배포되도록 설정!

✅ 2) GitHub Actions에서 배포 확인
1️⃣ GitHub Repository → Actions 탭 이동
2️⃣ CI/CD 워크플로우 실행 상태 확인
3️⃣ Vercel에서 최신 배포 상태 확인

📌 CI/CD를 활용하면 코드 변경 시 자동으로 테스트 및 배포 진행 가능!

---

3. Next.js 15에서 유지보수를 위한 로깅 시스템 구축

✅ 1) Winston을 활용한 서버 로깅 (lib/logger.ts)

import winston from "winston";

const logger = winston.createLogger({
  level: "info",
  format: winston.format.json(),
  transports: [
    new winston.transports.Console(),
    new winston.transports.File({ filename: "logs/error.log", level: "error" }),
  ],
});

export default logger;

📌 Winston을 활용하여 서버 로그를 저장하고 분석 가능!

✅ 2) API Routes에서 로깅 적용 (app/api/logger/route.ts)

import logger from "@/lib/logger";

export async function GET() {
  logger.info("API 요청이 발생했습니다.");
  return new Response("로그가 기록되었습니다!");
}

📌 API 요청 발생 시 로그를 기록하여 서비스 상태 모니터링 가능!

---

✅ 여기까지 Next.js 15에서 유지보수 및 디버깅 전략을 배웠습니다!
👉 "그렇다면, Next.js 15에서 프로젝트를 마무리하면서 정리할 사항은 무엇일까?"
✅ 다음 회차에서 Next.js 15의 프로젝트 마무리 및 베스트 프랙티스를 배워봅시다!