페이지 연결 및 구조 정리 (App Router 기준)

단일 페이지로 구성된 포트폴리오 프로젝트에서 각 섹션을 자연스럽게 연결하고,
Next.js App Router 기반으로 라우팅과 기본 SEO 설정까지 정리하는 과정을 진행했습니다.
SSR은 사용하지 않고, 정적 콘텐츠 중심의 구조를 유지했습니다.

1. 단일 페이지 내 섹션 연결

포트폴리오 구조는 한 페이지 안에 여러 섹션(Hero, About, Projects, Skills, Contact 등)을 순서대로 나열하는 형태로 구성했습니다.
각 섹션에는 고유한 id를 부여하고, 상단 헤더 또는 네비게이션 바에서 해당 id로 이동할 수 있도록 앵커 링크를 연결했습니다.

<a href="#projects">Projects</a>

<section id="projects">
  ...
</section>

자연스러운 스크롤 이동을 위해 글로벌 CSS에 다음과 같은 속성을 추가했습니다.

html {
  scroll-behavior: smooth;
}

2. App Router 기반 페이지 구조 유지

App Router를 사용하고 있으므로, 라우팅과 페이지 구조는 app/ 디렉토리 중심으로 구성했습니다.

• app/page.tsx → 루트 페이지 (/)
• 추가 페이지를 만들고 싶을 경우 → app/projects/page.tsx 등으로 구성 가능

import Hero from "@/sections/Hero";
import About from "@/sections/About";
import Projects from "@/sections/Projects";
import Skills from "@/sections/Skills";
import Contact from "@/sections/Contact";

export const metadata = {
  title: "프론트엔드 포트폴리오",
  description: "프론트엔드 개발자의 프로젝트와 기술 스택을 소개합니다.",
  openGraph: {
    title: "프론트엔드 포트폴리오",
    images: ["/images/og-image.png"],
  },
};
export default function Home() {
  return (
    <>
      <Hero />
      <About />
      <Projects />
      <Skills />
      <Contact />
    </>
  );
}

3. 내부 페이지 라우팅 처리 (선택사항)

단일 페이지 외에 /projects, /about 같은 개별 페이지를 만들고 싶은 경우,
app/projects/page.tsx처럼 디렉토리를 만들고 해당 파일에서 컴포넌트를 렌더링하면 됩니다.

내부 페이지 간 이동은 next/link를 사용합니다.

import Link from "next/link";

<Link href="/projects">프로젝트 더 보기</Link>

4. SEO 설정: 메타데이터 정의

Next.js App Router에서는 next/head 대신 export const metadata를 사용해
페이지 타이틀, 설명, Open Graph 이미지를 설정할 수 있습니다.

이 설정은 검색엔진 최적화(SEO)와 SNS 링크 미리보기에 사용됩니다.

export const metadata = {
  title: "프론트엔드 포트폴리오",
  description: "프론트엔드 개발자의 프로젝트와 기술 스택을 소개합니다.",
  openGraph: {
    title: "프론트엔드 포트폴리오",
    images: ["/images/og-image.png"],
  },
};

5. 404 페이지 처리

존재하지 않는 경로에 접근했을 때 보여줄 페이지는 app/not-found.tsx 파일을 만들어 설정할 수 있습니다.
이 파일은 Next.js가 자동으로 감지하여 404 페이지로 사용합니다.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div className="text-center mt-40">
      <h1 className="text-3xl font-bold">404 - 페이지를 찾을 수 없습니다</h1>
    </div>
  );
}

6. 정리

• 각 섹션은 id를 기준으로 헤더에서 연결되며, 부드러운 스크롤 효과를 적용했습니다.
• App Router 구조에서 모든 섹션은 app/page.tsx에서 불러오는 단일 페이지 방식으로 구성했습니다.
• 필요 시 라우팅 페이지(/projects 등)를 추가할 수 있으며, next/link를 사용해 이동할 수 있습니다.
• metadata 설정을 통해 페이지별 SEO 정보와 미리보기 데이터를 지정했습니다.
• not-found.tsx 파일로 404 페이지도 간단하게 대응할 수 있습니다.