NextJs (1) 라우팅, Navigation

📚 NextJs

Next.js는 React 기반의 JavaScript 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation), API 라우트, 최적화된 이미지 처리 등의 기능을 제공합니다.

📚 시작하기

• Next.js 프로젝트는 다음 명령어로 시작할 수 있습니다.

npm run dev (next dev) // 개발모드

📚 라우팅

💡 Next.js는 파일 시스템 기반 라우팅을 제공합니다.

페이지를 생성하기 위해선 /pages 또는 Next.js 14 버전부터 추가된 /app 안에 JavaScript 또는 TypeScript 파일을 만드시면 됩니다. 이 파일 안에는 반드시 export default로 선언된 React 컴포넌트가 존재해야 합니다.

14버전을 예로 들면, /app/page.tsx 파일이 있다면, 이는 웹사이트의 루트 URL(/)에 해당하는 페이지가 됩니다. 만약 /app/about-us/page.tsx 파일이 있다면, 이는 /about-us URL에 해당하는 페이지가 됩니다.

📚 404 페이지

💡 사용자가 존재하지 않는 페이지에 접근하려 할 때 보여지는 페이지

/app/not-found.tsx 파일을 생성하여 404 페이지를 만들 수 있습니다.

📚 Navigation

💡 Next.js에서는 HTML의 < a > 태그 대신 < Link > 컴포넌트를 사용하여 내비게이션을 구현합니다.

< Link > 컴포넌트를 사용하면 클라이언트 사이드 라우팅을 통해 페이지 전환을 빠르게 수행할 수 있습니다.

// components/navigation.tsx
import {usePathname} from 'next/router';
import Link from 'next/link';

export default function Navigation() {
  const path = usePathname();
  
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link> {path == "/" ? "👍🏻" : ""}
        </li>
        <li>
          <Link href="/about-us">About Us</Link> {path == "about-us" ? "👍🏻" : ""}
        </li>
      </ul>
    </nav>
  );
}

// app/page.tsx
"use client";

import Navigation from './Navigation';

export default function Page() {
  return (
    <div>
      <Navigation /> 
		// 위와 같이 Navigation 컴포넌트를 임포트하여 사용할 수 있습니다.
      <h1>Hello, world!</h1>
    </div>
  );
}

🗣️ usePathname은 현재 페이지의 경로를 반환하는 Next.js의 훅입니다. 이 훅은 클라이언트 컴포넌트에서만 동작하므로, 해당 파일에는 'use client' 지시자를 포함해야 합니다.