📘 Next.js 기초 강좌

1. Vercel 배포

Next.js는 Vercel에서 만든 프레임워크라서, 배포 과정이 아주 단순합니다.

(1) GitHub에 코드 올리기

git init
git add .
git commit -m "first next.js app"
git branch -M main
git remote add origin https://github.com/내아이디/next-tutorial.git
git push -u origin main

(2) Vercel 연결

Vercel 접속 → GitHub 연동
"New Project" → 방금 올린 저장소 선택
Framework: Next.js 자동 감지

Deploy 버튼 클릭 → 자동 배포 완료 🎉

기본 URL: https://next-tutorial.vercel.app
- 하지만 위 URL이 이미 있으므로 배포에 성공하면 다른 URL이 랜덤하게 생성됩니다.
- 하기 링크는 제가 배포하면서 올린 링크입니다.
- https://next-tutorial-ten-teal.vercel.app

혹 다음과 같이 에러가 날 수 있습니다.

에러가 나는 원인은 다음과 같습니다.

1) ESLint 규칙 위반(no-explicit-any)로 빌드 실패

src/app/posts/page.tsx: Unexpected any
src/app/posts-client/page.tsx: Unexpected any

2) Route Handler 두 번째 인자 타입 불일치로 빌드 실패

Route "src/app/api/todos/[id]/route.ts" has an invalid "DELETE" export:
Type "Params" is not a valid type for the function's second argument.
...
Type "{ params: { id: string } }" is not a valid type for the function's second argument.

✅ 해결: `Post` 타입 선언해서 `any` 제거

src/app/posts/page.tsx

type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

export default async function PostsPage() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    // 데모에선 항상 최신 보기
    cache: "no-store",
  });
  const posts: Post[] = await res.json();

  return (
    <main>
      <h1>Posts 목록</h1>
      <ul>
        {posts.slice(0, 5).map((post) => (
          <li key={post.id}>
            <strong>{post.title}</strong>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

src/app/posts-client/page.tsx

"use client";

import { useState } from "react";

type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

export default function PostsClientPage() {
  const [posts, setPosts] = useState<Post[]>([]);

  const loadPosts = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data: Post[] = await res.json();
    setPosts(data.slice(0, 5));
  };

  return (
    <main>
      <h1>Client Fetch Example</h1>
      <button onClick={loadPosts}>글 불러오기</button>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <strong>{post.title}</strong>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

src/app/api/todos/[id]/route.ts

import { NextResponse } from "next/server";
import { store } from "../store";

export async function DELETE(req: Request) {
  const { pathname } = new URL(req.url);
  const id = pathname.split("/").pop();

  if (!id) {
    return NextResponse.json({ error: "Bad Request" }, { status: 400 });
  }

  const ok = store.remove(id);
  if (!ok) {
    return NextResponse.json({ error: "Not Found" }, { status: 404 });
  }
  return NextResponse.json({ ok: true });
}

이렇게 수정 후에 다시 배포하시면 빌드 통과하게 됩니다.

1) ESLint 규칙 위반(no-explicit-any) 조치

Next.js는 next build 단계에서 ESLint + 타입체크를 함께 돌립니다.
3강 예제에서 빠르게 보여드리려고 any를 쓴 부분이, 프로젝트의 ESLint 규칙 @typescript-eslint/no-explicit-any에 걸려 빌드가 실패했습니다.
조치: Post 타입을 명확히 선언하고, 상태(useState<Post[]>)와 fetch 응답에 타입을 부여하여 해결했습니다.

2) Route Handler 두 번째 인자 타입 불일치 조치

Route "src/app/api/todos/[id]/route.ts" has an invalid "DELETE" export:
Type "Params" is not a valid type for the function's second argument.
...
Type "{ params: { id: string } }" is not a valid type for the function's second argument.

Next.js(App Router)에서는 Route Handler 시그니처를 엄격하게 검사합니다.
조치: 두 번째 인자 자체를 없애고, req.url에서 id를 파싱하는 방식으로 변경했습니다.

이러면 Next의 “두 번째 인자 타입 검사”를 아예 회피할 수 있어 안정적으로 빌드가 통과합니다.

next-tutorial-ten-teal.vercel.app

2. 환경변수 관리

실제 프로젝트에서는 API 키, DB 접속 정보 등 민감한 값을 직접 코드에 넣으면 안 됩니다.

Next.js에서는 .env.local 파일을 사용합니다.

(1) `.env.local` 생성

NEXT_PUBLIC_API_URL=https://myapi.com
SECRET_KEY=abcdef123456

NEXT_PUBLIC_ prefix가 있으면 클라이언트에서 접근 가능
prefix가 없으면 서버에서만 사용 가능

(2) 사용하기

// 서버 전용 (app/api/hello/route.ts)
export async function GET() {
  console.log(process.env.SECRET_KEY); // 서버 전용
  return Response.json({ ok: true });
}

// 클라이언트 (app/page.tsx)
export default function Home() {
  return <p>API URL: {process.env.NEXT_PUBLIC_API_URL}</p>;
}

⚠️ .env.local은 git에 올리지 않도록 .gitignore에 포함해야 합니다.

3. 이미지 최적화

Next.js의 <Image> 컴포넌트는 자동으로:

크기 최적화
WebP 변환
지연 로딩(lazy loading)
반응형 사이즈 조정

을 지원합니다.

(1) 사용 예시

import Image from "next/image";
import profilePic from "../public/profile.png";

export default function Profile() {
  return (
    <div>
      <h2>프로필</h2>
      <Image src={profilePic}
        alt="Profile"
        width={200}
        height={200}
        priority
      />
    </div>
  );
}

👉 public/ 폴더의 이미지 외에도 외부 도메인 이미지를 사용하려면

next.config.mjs에서 허용해야 합니다:

export default {
  images: {
    domains: ["example.com"],
  },
};

4. SEO 기본 최적화

(1) 메타데이터 설정

app/layout.tsx 또는 각 page.tsx에서 export const metadata로 설정합니다.

export const metadata = {
  title: "Next.js 기초 강좌",
  description: "Next.js 개념과 사용법을 배우는 기초 강좌",
  openGraph: {
    title: "Next.js 기초 강좌",
    description: "Next.js 개념과 사용법을 배우는 기초 강좌",
    url: "https://next-tutorial.vercel.app",
    siteName: "Next.js 강좌",
    images: [
      {
        url: "https://next-tutorial.vercel.app/og-image.png",
        width: 1200,
        height: 630,
      },
    ],
    locale: "ko_KR",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Next.js 기초 강좌",
    description: "Next.js 개념과 사용법을 배우는 기초 강좌",
    images: ["https://next-tutorial.vercel.app/og-image.png"],
  },
};

👉 이렇게 하면 구글 검색 + SNS 공유 카드까지 자동 대응됩니다.

(2) Canonical 링크 추가 (중복 URL 방지)

app/layout.tsx

export const metadata = {
  metadataBase: new URL("https://next-tutorial.vercel.app"),
  alternates: {
    canonical: "/",
  },
};

5. 오늘의 정리

GitHub + Vercel로 자동 배포 파이프라인 구축
.env.local 환경변수로 보안성 확보
<Image> 컴포넌트로 이미지 최적화
metadata API로 SEO/SNS 대응

📚 저장소

GitHub - heroyooi/next-tutorial at ch1_7

1단계. Next.js 입문 (개념 & 활용 기초)

1-7. 배포와 최적화 (feat. 타입 에러 해결)

1. Vercel 배포

(1) GitHub에 코드 올리기

(2) Vercel 연결

✅ 해결: `Post` 타입 선언해서 `any` 제거

2. 환경변수 관리

(1) `.env.local` 생성

(2) 사용하기

3. 이미지 최적화

(1) 사용 예시

4. SEO 기본 최적화

(1) 메타데이터 설정

(2) Canonical 링크 추가 (중복 URL 방지)

5. 오늘의 정리

📚 저장소

💬 댓글

📘 Next.js 기초 강좌

1단계. Next.js 입문 (개념 & 활용 기초)

1-7. 배포와 최적화 (feat. 타입 에러 해결)

1. Vercel 배포

(1) GitHub에 코드 올리기

(2) Vercel 연결

✅ 해결: Post 타입 선언해서 any 제거

2. 환경변수 관리

(1) .env.local 생성

(2) 사용하기

3. 이미지 최적화

(1) 사용 예시

4. SEO 기본 최적화

(1) 메타데이터 설정

(2) Canonical 링크 추가 (중복 URL 방지)

5. 오늘의 정리

📚 저장소

💬 댓글

✅ 해결: `Post` 타입 선언해서 `any` 제거

(1) `.env.local` 생성