📖 TIL - Next.js의 핵심 기능들

🔄 페이지 이동 방식

🔗 Link 컴포넌트

• Link 컴포넌트는 정말 편리하게 사용 할 수 있다. href에 경로만 넣어주면 그 페이지를 미리 불러와줘서(prefetching) 클릭했을 때 바로 이동할 수 있음
• 화면에 보이는 링크들은 알아서 미리 로드해둬서 사용자 경험이 훨씬 좋아짐
• 페이지 전체를 새로고침 없이 이동할 수 있어서 앱처럼 부드러운 전환 효과가 생김

import Link from 'next/link'

export default function Navigation() {
  return (
    <nav>
      <Link href="/">홈</Link>
      <Link href="/about">소개</Link>
    </nav>
  )
}

🧭 useRouter - 코드로 페이지 이동하기

• 버튼 클릭이나 폼 제출 후에 페이지를 이동시키고 싶을 때 정말 유용한 훅
• 코드에서 원하는 타이밍에 "이 페이지로 가!" 하고 명령할 수 있어서 편리함

Next.js 13부터는 임포트 경로가 바뀌었다 (next/navigation)

import { useRouter } from 'next/navigation'

export default function MyButton() {
  const router = useRouter()
  
  return (
    <button onClick={() => router.push('/dashboard')}>
      대시보드로 슝~✨
    </button>
  )
}

자주 쓰는 기능들

1. 페이지 이동: router.push('/path') - 새 페이지로 이동, router.replace('/path') - 히스토리 남기지 않고 이동
2. 뒤로가기/앞으로가기: router.back(), router.forward() - 브라우저 화살표 버튼과 같은 효과
3. 새로고침: router.refresh() - 페이지를 새로고침하지만 상태는 유지
4. 미리 로딩: prefetch 메서드로 사용자가 곧 방문할 것 같은 페이지 미리 준비해두기

🔌 라우트 핸들러 vs 서버 액션 - 백엔드 기능을 처리하는 두 가지 방법!

📡 라우트 핸들러 (Route Handler) - 나만의 API 만들기

• app 폴더 안에 폴더 만들고 route.ts 파일 하나 추가
• 예전 pages 폴더의 API 라우트랑 비슷

언제 쓰면 좋을까?

1. 클라이언트에서 API 키 같은 민감한 정보 숨기고 싶을 때 (보안!)
2. 다른 서비스나 앱에서도 쓸 수 있는 API를 만들고 싶을 때

// app/api/hello/route.ts
export async function GET() {
  // 여기서 무슨 작업이든 할 수 있음!
  return Response.json({ message: '안녕하세요!' })
}

⚙️ 서버 액션 (Server Action) - 폼 처리가 너무 쉬워짐!

• 'use server'` 한 줄만 추가하면 서버에서 실행되는 함수를 만들 수 있다
• 폼 제출 처리가 정말 간단해지고, 백엔드 코드랑 프론트엔드 코드를 자연스럽게 섞을 수 있다

언제 쓰면 좋을까?

1. 폼에서 데이터를 받아서 DB에 저장하고 싶을 때
2. 페이지 새로고침 없이 서버 데이터를 갱신하고 싶을 때

// 서버 액션 정의 - 이 함수는 서버에서 실행됨!
'use server'

export async function addItem(formData) {
  const item = formData.get('item')
  // DB에 저장하는 코드 (비밀 키가 있어도 안전함!)
  await db.items.create({ data: { name: item } })
  // 페이지 데이터 갱신 - 새로고침 없이!
  revalidatePath('/items')
}

// 클라이언트 컴포넌트에서 쓰는 건 정말 쉬움
export default function AddItemForm() {
  return (
    <form action={addItem}>
      <input name="item" placeholder="할 일 추가하기" type="text" />
      <button type="submit">추가</button>
    </form>
  )
}

🖼️ Image 컴포넌트 - 이미지 최적화의 마법!

Next.js의 Image 컴포넌트는 일반 img 태그보다 훨씬 많은 기능을 자동으로 제공해줌:

• 자동으로 이미지 크기를 최적화하고 최신 포맷(WebP, AVIF)으로 변환해줘서 로딩 속도가 빨라짐
• 화면에 보일 때만 로드하는 지연 로딩 기능이 기본으로 적용됨 (스크롤 성능 향상!)
• 이미지 로딩 중에 레이아웃이 흔들리는 현상(CLS)을 방지해줘서 UX가 훨씬 좋아짐

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="사용자 프로필 이미지"
      // 이렇게만 써도 자동으로 최적화가 적용됨!
    />
  )
}

🔒 remotePatterns 설정 - 외부 이미지 사용하기

외부 사이트의 이미지를 사용하려면 약간의 설정이 필요한데, 보안상의 이유로 어떤 사이트의 이미지를 사용할지 명시해야 함:

// next.config.js에 추가하기
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com', // 여기에 이미지 가져올 사이트 도메인 넣기
        port: '',
        pathname: '/account123/**', // 특정 경로만 허용하거나 '/**'로 모든 경로 허용
      },
    ],
  },
}

처음엔 귀찮아 보이지만, 이런 제한이 있어서 악의적인 사이트의 이미지가 우리 앱에 로드되는 걸 방지할 수 있음!

🎨 스타일링 - Tailwind CSS가 대세!

Next.js는 Tailwind CSS와 찰떡궁합임:

• 프로젝트 생성할 때 Tailwind 옵션 선택하면 모든 설정이 자동으로 완료됨 (reset CSS도 포함!)
• 클래스 이름을 자동으로 최적화해서 번들 크기를 줄여줌
• JIT(Just-In-Time) 컴파일러 덕분에 개발할 때 변경사항이 바로 반영돼서 개발 속도가 빨라짐

📝 메타데이터 (Metadata) - SEO 점수 올리기!

구글 검색결과와 소셜미디어 공유에 표시될 정보를 쉽게 설정할 수 있음:

정적 메타데이터

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'test', // 탭에 표시될 제목
  description: 'description test', // 검색 결과에 표시될 설명
}
 
export default function Page() {
  return <div>내용은 여기에!</div>
}

동적 메타데이터

import type { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // 예를 들어 상품 페이지라면 상품 ID로 정보를 가져와서
  const id = params.id
  const product = await fetch(`https://api.example.com/products/${id}`).then((res) => res.json())
 
  // 페이지마다 다른 제목과 이미지를 설정할 수 있음!
  return {
    title: `${product.title}`,
    openGraph: {
      images: [`/products/${id}.jpg`],
      description: product.description,
    },
  }
}
 
export default function ProductPage({ params }: Props) {
  return <div>상품 정보가 여기에 표시됨</div>
}

🔑 오늘 배운 것 요약

• Link 컴포넌트로 페이지 이동이 빠르고 부드러워짐 (prefetching 덕분!)
• useRouter로 코드에서 원하는 시점에 페이지 이동 제어 가능
• 라우트 핸들러로 간단하게 API 만들 수 있음 (api 폴더에 route.ts만 추가하면 끝!)
• 서버 액션으로 폼 처리가 엄청 쉬워짐 (클라이언트-서버 왔다갔다 안 해도 됨)
• Image 컴포넌트로 이미지가 자동 최적화되어 사이트 성능 UP
• Tailwind CSS는 Next.js와 함께 쓰면 설정 걱정 없음
• 메타데이터 API로 SEO와 소셜 공유 최적화 쉽게 할 수 있음

이 기능들 덕분에 Next.js로 개발하면 성능 좋고 사용자 경험 뛰어난 웹사이트를 쉽게 만들 수 있음! 🚀