[Next.js/Page Router] 4. SEO 설정 및 Next.js 프로젝트 배포하기

SEO 설정하기

 

1. 썸네일과 Favicon 설정하기

Next.js 프로젝트에서 썸네일과 파비콘을 설정하려면 public 폴더에 favicon.ico와 썸네일 이미지를 추가하면 됩니다.

📌 설정 방법

1. public 폴더에 favicon.ico 파일 추가
2. 프로젝트의 썸네일 이미지를 public 폴더에 추가

 

2. 메타태그 설정하기

Next.js에서는 Head 컴포넌트를 활용하여 페이지별로 메타태그를 설정할 수 있습니다.

 

📌 설정 방법

import Head from "next/head"; // 메타태그 설정을 위한 Head 컴포넌트 import

 

⚠️ 주의사항

• SSG 방식으로 렌더링하면 초기 로딩 중에 메타태그가 적용되지 않을 수 있음
• 따라서 다음과 같이 로딩 화면에서도 기본 메타태그를 설정하여 문제를 방지해야 함

 

 

---

 

Next.js 프로젝트 배포하기 (Vercel 사용)

1. Vercel 회원가입 및 설치

 

📌 Vercel 회원가입

• Vercel 공식 홈페이지에서 회원가입 후 로그인

 

📌 Vercel CLI 설치 (mac)

• window는 sudo 빼고 입력

sudo npm install -g vercel

 

2. Vercel 배포 진행

 

📌 Vercel 로그인

vercel login

 

📌 프로젝트 배포

vercel

실행 로그 예시

Vercel CLI 40.1.0
? Set up and deploy “~/Documents/onebite-next/section02”? yes
? Which scope should contain your project? ayeongjin's projects
? Link to existing project? no
? What’s your project’s name? onebite-books-page
? In which directory is your code located? ./
Auto-detected Project Settings (Next.js):
- Build Command: next build
- Development Command: next dev --port $PORT
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: Next.js default
? Want to modify these settings? no

1. 현재 디렉터리를 배포할 것인지 묻는 질문
2. Vercel 계정 또는 팀을 선택하는 부분
3. 기존에 배포된 Vercel 프로젝트와 연결할 것인지 묻는 질문
4. Vercel에서 사용할 프로젝트 이름을 입력
5. 배포할 코드가 위치한 디렉터리를 지정
6. Vercel이 자동으로 프로젝트 환경을 감지한 결과
7. 위에서 자동 감지된 설정을 수정할 것인지 묻는 질문

 

📌 배포 완료

• 완료된 백엔드 서버와 Next.js 서버 확인

 

📌 백엔드 서버 URL 변경

• 배포된 백엔드 서버의 URL을 사용하여 데이터 요청 주소 변경

 

3. 프로덕션 모드로 최종 배포

vercel --prod

이 명령어를 실행하면 최종 배포(Production Deploy)가 완료됩니다.

 

 

---

 

Next.js 15.0.3 이후 ESLint 설정 변경 사항

💡 참고사항
Next.js 15.0.3 버전(2024년 11월 출시)부터 ESLint 규칙이 더욱 엄격해졌습니다. 이에 따라 개발 중 불필요한 오류가 발생할 수 있으므로, 아래 설정을 적용하는 것이 좋습니다.

 

📌 주요 변경 사항

• any 타입 사용 시 오류 발생
• 사용하지 않는 변수를 선언하면 오류 발생

 

📌 ESLint 설정 수정 방법

eslintrc.config.json 파일을 아래와 같이 수정하세요

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    rules: {
      "@typescript-eslint/no-unused-vars": "warn", // 사용하지 않는 변수는 경고
      "@typescript-eslint/no-explicit-any": "off", // any 타입 사용 가능
    },
  },
];

export default eslintConfig;