📘 Next.js 기초 강좌

1. Next.js 라우팅 기본 개념

Next.js는 파일 기반 라우팅을 사용합니다.
즉, app/ 폴더 안에 파일을 만들면 자동으로 URL 경로가 생성됩니다.

예시:

app/page.tsx        →   /
app/about/page.tsx  →   /about
app/contact/page.tsx →  /contact

👉 별도의 라우터 설정 없이 폴더/파일 구조 = 라우팅 이라는 점이 Next.js의 큰 장점이에요.

2. About 페이지 만들기

(1) `app/about/page.tsx` 생성

export default function AboutPage() {
  return (
    <main>
      <h1>About 페이지</h1>
      <p>이 페이지는 Next.js 라우팅을 학습하기 위한 예제입니다.</p>
    </main>
  );
}

→ 브라우저에서 http://localhost:3000/about 접속하면 About 페이지가 자동으로 열립니다 🎉

3. 페이지 이동 (Link 컴포넌트)

Next.js에서는 Link 컴포넌트를 사용하여 페이지 간 이동을 합니다.

클라이언트 사이드 네비게이션이 적용되어 빠른 페이지 전환이 가능해요.

(1) `app/page.tsx` 수정

import Link from "next/link";
import styles from "@/styles/home.module.scss";

export default function Home() {
  return (
    <main>
      <h1 className={styles.title}>Hello Next.js 🚀</h1>
      <p className={styles.description}>
        이것이 나의 첫 번째 Next.js 페이지입니다.
      </p>
      <Link href="/about">👉 About 페이지로 이동</Link>
    </main>
  );
}

👉 메인 페이지에서 👉 About 페이지로 이동 버튼을 클릭하면 /about으로 이동합니다.

4. 글로벌 네비게이션 만들기

자주 쓰는 네비게이션은 layout.tsx에서 공통으로 넣어두는 게 좋아요.

(1) `app/layout.tsx` 수정

import { Noto_Sans_KR } from 'next/font/google';
import Link from 'next/link';
import './globals.css';

const notoSansKR = Noto_Sans_KR({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
});

export const metadata = {
  title: 'My Next.js App',
  description: 'Next.js 기초 강좌 프로젝트',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body className={notoSansKR.className}>
        <header style={{ padding: '1rem', borderBottom: '1px solid #ddd' }}>
          <nav style={{ display: 'flex', gap: '1rem' }}>
            <Link href="/">홈</Link>
            <Link href="/about">소개</Link>
          </nav>
        </header>
        <main style={{ padding: '2rem' }}>{children}</main>
      </body>
    </html>
  );
}

👉 이제 모든 페이지에서 상단에 홈 | 소개 메뉴가 보이고, 클릭 시 이동됩니다.

5. 오늘의 정리

파일 기반 라우팅 이해 (app/about/page.tsx → /about)
Link 컴포넌트로 페이지 이동
layout.tsx를 활용해 글로벌 네비게이션 만들기

📚 저장소

GitHub - heroyooi/next-tutorial at ch1_2

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

1-2. 페이지와 라우팅

1. Next.js 라우팅 기본 개념

2. About 페이지 만들기

(1) `app/about/page.tsx` 생성

3. 페이지 이동 (Link 컴포넌트)

(1) `app/page.tsx` 수정

4. 글로벌 네비게이션 만들기

(1) `app/layout.tsx` 수정

5. 오늘의 정리

📚 저장소

💬 댓글

📘 Next.js 기초 강좌

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

1-2. 페이지와 라우팅

1. Next.js 라우팅 기본 개념

2. About 페이지 만들기

(1) app/about/page.tsx 생성

3. 페이지 이동 (Link 컴포넌트)

(1) app/page.tsx 수정

4. 글로벌 네비게이션 만들기

(1) app/layout.tsx 수정

5. 오늘의 정리

📚 저장소

💬 댓글

(1) `app/about/page.tsx` 생성

(1) `app/page.tsx` 수정

(1) `app/layout.tsx` 수정