[Next.js 기초] 10. 환경 변수 처리 및 SEO를 고려한 Metadata 설정

(1) 환경 변수 처리

• 서버 환경(node)에서 환경변수 접근 시에는 자유롭게 환경변수 네이밍 가능
• process.env.DB_HOST

// .env
DB_HOST=https://db-host.com

• 클라이언트 환경(browser)에서 환경변수 접근 시에는 prefix로 NEXT_PUBLIC_ 을 붙여줌

NEXT_PUBLIC_MY_HOST=http://localhost:3000

---

(2) SEO를 고려한 Metadata 설정

정적인 metadata 설정

export const metadata = {
  title: '...',
  description: '...',
}

export default function Page() {}

 

동적인 metadata 설정

export async function generateMetadata({ params, searchParams }, parent) {
  // read route params
  const { id } = await params
  
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
  
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
  
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}

export default function BreedsPage({ params, searchParams }) {}