Next.js 13 이상에서는 app/ 디렉토리를 사용하는 App Router 방식에서 getServerSideProps를 지원하지 않습니다.

getServerSideProps는 **기존 Pages Router (pages/ 폴더 기반)**에서만 쓸 수 있고, **App Router (app/ 폴더 기반)**에서는 지원되지 않는 함수입니다.

---

✅ 해결 방법

1. pages/ 디렉토리를 사용하는 방식으로 변경

만약 getServerSideProps를 꼭 사용해야 한다면, app/page.tsx를 pages/index.tsx로 옮기세요.

bash

복사편집

# 예: src/pages/index.tsx

그리고 getServerSideProps를 그대로 사용하면 됩니다.

---

2. App Router에서 서버 데이터를 가져오는 방법 (권장)

App Router에서는 다음 방식으로 서버 사이드 데이터를 처리합니다:

• page.tsx 또는 layout.tsx 파일을 async 함수로 만들고, 거기서 fetch 호출을 직접 하면 됩니다.

예:

// app/page.tsx
import Link from "next/link";

async function getUsers() {
    // 실제 fetch도 가능
    return [
        { id: 1, username: "one" },
        { id: 2, username: "two" },
        { id: 3, username: "three" },
    ];
}

export default async function HomePage() {
    const users = await getUsers();

    return (
        <ul>
            {users.map((user) => (
                <li key={user.id}>
                    <Link href={`/users/${user.username}`}>
                        {user.username}
                    </Link>
                </li>
            ))}
        </ul>
    );
}

이렇게 하면 getServerSideProps 없이도 서버에서 데이터 받아오기 + 렌더링이 잘 됩니다.

---

💡 정리

• app/ 폴더에선 getServerSideProps ❌ → 대신 async 컴포넌트로 처리
• pages/ 폴더에선 getServerSideProps ✅