Next.js

🚀 Next.js 상품 목록 페이지 만들기 (SSR + API 연동)

수아파파's 2025. 2. 26. 19:54
반응형

✅ 1️⃣ 프로젝트 개요 및 필요 기능 설명
✅ 2️⃣ Next.js 설치 및 기본 설정
✅ 3️⃣ 서버 사이드 렌더링 (SSR) 및 API 연동
✅ 4️⃣ 상품 상세 페이지 (동적 라우팅 적용)
✅ 5️⃣ 스타일링 및 SEO 최적화

1️⃣ 프로젝트 개요 및 필요 기능 설명

🎯 목표: Next.js를 활용하여 **서버 사이드 렌더링(SSR)**과 API 연동을 적용한 상품 목록 페이지 만들기

  • SSR → 요청 시마다 서버에서 최신 데이터 가져와서 렌더링 (SEO 최적화)
  • API 연동 → 외부 API를 사용하여 상품 데이터를 가져옴
  • 동적 라우팅 → 상품 ID에 따라 URL을 동적으로 생성

📌 주요 기능

✅ 상품 목록 페이지 (SSR) → 외부 API에서 상품 리스트 불러오기
✅ 상품 상세 페이지 (동적 라우팅) → 상품 ID에 따라 개별 상품 정보 표시
✅ SEO 최적화 → 메타태그 설정 및 SSR 적용

🔥 Next.js의 SSR, 동적 라우팅, API 연동을 모두 활용한 실전 프로젝트!

2️⃣ Next.js 설치 및 기본 설정

🔹 설치 및 프로젝트 생성

📌 터미널에서 실행

npx create-next-app@latest nextjs-products
cd nextjs-products
npm run dev

 

  • npx create-next-app@latest: 최신 Next.js 버전으로 프로젝트 생성
  • npm run dev: 개발 서버 실행 (http://localhost:3000)

🔹 디렉토리 구조 설명

nextjs-products/
├── pages/                # 파일 기반 라우팅 디렉토리
│   ├── index.js          # 홈 (상품 목록 페이지)
│   └── products/
│       └── [id].js       # 동적 라우팅 (개별 상품 페이지)
├── public/               # 정적 파일 (이미지, 폰트 등)
├── styles/               # CSS 및 스타일 파일

 

🔹 API 데이터 출처

3️⃣ 서버 사이드 렌더링 (SSR) 및 API 연동

🔹 1. 상품 목록 페이지 (SSR) (pages/index.js)

📌 예제 코드 (pages/index.js)

import Link from "next/link";

export async function getServerSideProps() {
  const res = await fetch("https://fakestoreapi.com/products");
  const products = await res.json();

  return { props: { products } };
}

export default function Home({ products }) {
  return (
    <div>
      <h1>상품 목록</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <Link href={`/products/${product.id}`}>
              <a>
                <h2>{product.title}</h2>
                <img src={product.image} alt={product.title} width="100" />
                <p>가격: ${product.price}</p>
              </a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

 

✅ **getServerSideProps**로 요청 시마다 서버에서 데이터를 가져와 렌더링
✅ SSR 적용 → 최신 데이터 유지 & SEO 최적화

🔹 2. 상품 목록 페이지 설명

  • 상품 제목, 이미지, 가격을 보여주는 목록 형태의 페이지
  • 상품 제목을 클릭하면 개별 상품 페이지로 이동 (URL에 상품 ID 포함)
  • SSR 적용 → 페이지가 요청될 때마다 최신 상태 유지
  • SEO 최적화 → SSR로 검색 엔진이 쉽게 크롤링 가능

4️⃣ 상품 상세 페이지 (동적 라우팅 적용)

🔹 1. 동적 라우팅 (상품 상세 페이지) (pages/products/[id].js)

  • **getServerSideProps()**를 사용하여 SSR 적용
  • **URL 파라미터 (id)**에 따라 상품 ID를 동적으로 받아서 페이지 렌더링
  • https://fakestoreapi.com/products/{id} API에서 개별 상품 데이터 가져옴

📌 예제 코드 (pages/products/[id].js)

import { useRouter } from "next/router";

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://fakestoreapi.com/products/${params.id}`);
  const product = await res.json();

  return { props: { product } };
}

export default function ProductDetail({ product }) {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>{product.title}</h1>
      <img src={product.image} alt={product.title} width="200" />
      <p>가격: ${product.price}</p>
      <p>설명: {product.description}</p>
      <button onClick={() => router.back()}>뒤로가기</button>
    </div>
  );
}

✅ **getServerSideProps**로 SSR 적용 → 최신 데이터 유지
✅ **params.id**를 통해 URL 파라미터로 상품 ID를 받아옴
✅ useRouter() → 뒤로가기 버튼 구현

🔹 2. 상품 상세 페이지 설명

  • SSR 적용으로 상품 상세 데이터가 항상 최신 상태로 유지
  • SEO 최적화 → SSR로 검색 엔진이 페이지 내용 크롤링 가능
  • 상품 제목, 이미지, 가격, 설명을 보여줌
  • 뒤로가기 버튼 → 목록 페이지로 쉽게 이동 가능

5️⃣ 스타일링 및 SEO 최적화

🔹 1. 스타일링 (Tailwind CSS 적용)

  • Tailwind CSS는 빠르고 직관적인 스타일링 가능
    📌 설치 및 설정
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

📌 tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

📌 Tailwind CSS 적용 예시 (index.js)

<h1 className="text-3xl font-bold">상품 목록</h1>

🔹 2. SEO 최적화 (next/head)

  • **next/head**를 사용하여 메타태그 설정으로 SEO 강화
    📌 예제 코드
import Head from "next/head";

<Head>
  <title>{product.title} - Next.js 쇼핑몰</title>
  <meta name="description" content={product.description} />
</Head>

✅ SSR + SEO 최적화로 검색 엔진 노출 극대화!

🎯 마무리: Next.js로 완성한 상품 목록 페이지

🔥 Next.js의 SSR, 동적 라우팅, API 연동을 모두 적용한 상품 목록 페이지 완성!
🚀 이제 완성된 페이지를 Vercel에 배포하고, 실전 프로젝트에 도전해보자!

반응형