[코딩온] 웹 풀스택 영등포 5기 과정_next.js(2)

안녕하세요

프로젝트를 위해 next.js 인강을 들으면서 새로 익혔던

next.js에 대해 2부 시작하도록 하겠습니다.

 

---

 

3. Link 컴포넌트 사용

매우 단순하지만 어쨌든 next 13부터 바뀐 내용이니 다뤄보도록 하겠습니다.

 

import Link from 'next/link'

 

먼저 next의 link에서 Link 컴포넌트를 가져옵니다.

 

export default function Page() {
	return <Link href="/">Dashboard</Link>
   }

 

a태그 처럼 사용하면 됩니다.

이렇게 바로 사용하는 경우보다는, 버튼을 눌렀을 때 움직이는 경우가 더 많습니다.

그럴 경우에는 useRouter라는 훅을 사용해서 사용할 수 있습니다.

'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
	const router = useRouter()
    
    return (
    <button onClick={() => router.push('/')}>
    	Main
    </button>
    )
}

 

next/navigation에서 useRouter를 호출해 온 다음에 간단하게 사용할 수 있습니다.

그다음 push라는 함수를 사용해서 가고 싶은 경로를 작성해 주면 됩니다.

 

여기서 가장 큰 유의점은 useRouter는 client 사이드에서만 사용이 가능합니다.

 

---

 

4. 데이터 캐싱과 페칭

 

데이터의 전체적인 캐싱을 다 공부하기에는 양이 너무 방대해서

fetch를 위주로 공부하였습니다.

 

fetch api는 next.js에서 확장해서 제공하며 사용을 권장하고 있습니다

이 fetch는 서버 컴포넌트와 클라이언트 컴포넌트에서 다 사용이 가능하며 

next.js에서 만드는 api에서도 사용할 수 있습니다.

 

기본적으로 이 next.js에서 제공하는 fetch를 사용하게 되면

발생하는 모든 데이터들을 캐싱을 하고 있게 됩니다.

server side

 

 

저희가 현재 얘기하는 fetch에 대한 데이터 caching은 보라색 영역입니다.

 

Data Recalidating (데이터 재검증) 

 

1. 시간 기반 재검증

특정 시간이 지날 때까지 캐싱을 유효화하다가 시간이 지나면 무효화함

fetch('https://...', { next: { revalidate: 3600 }})

 

next라는 키를 가진 객체를 만들고 revalidate를 추가해 주면

3600초 동안 유효한 데이터를 만들어줍니다.

만약 3600초가 지난다면 그 시간 이후에는 만료가 되어 새로운 데이터를 가져와서

데이터 재검증이 이루어집니다.

 

 

2. 온디맨드 재검증 - 태그 기반의 재검증

수요가 있을 때 검증하는 방법

// 캐시에 태그를 지정
fetch('https://...', { next: { tags: ['collection'] }})

// 태그된 캐시를 재검증
revalidateTag('collection')

 

데이터 재검증을 위해 태그를 사용해서 다시 소환해서 캐시를 재검증합니다.

그러면 데이터의 재검증이 이뤄지면서 최신화가 이루어지게 됩니다.

 

 

---

 

5. 메타 데이터

 

 

5-1. 정적 메타데이터

metadata를 객체로 정의하는 방법에서 이루어집니다.

import type { Metadata } from 'next'

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

 

Metadata 객체를 정의해서 title과 description을 정의해 주고 외부로 export 해주면 

이 정적 메타데이터를 사용할 수 있다.

---

 

5-2. 동적 메타데이터

개발자가 원하는 방식의 메타데이터 객체를 함수로 하는 것

 

import type { Metadata, ResolvingMetadata } from 'next'

export async function generateMetadata (
	{ params, searchParams }: Props,
    parent?: ResolvingMetadata
): Promise<Metadata> {

	const id = params.id
    const post = await fetch(`https:// .../${id}`).then((res) => res.json())
    const proviousImages = (await parent).openGraph?.images || []
    
    return {
    	title: post.titile,
        openGraph: {
        	images: ['/.....jpg', ...previousImages],
        },
    }
}

 

이 generateMetadata 함수를 호출하게 되면 return 안에 있는 객체로 전환되면서

이 객체를 통해 페이지를 정의할 수 있게 됩니다.

 

가령 어떤 페이스북 페이지를 공유하게 된다면 공유했을 때

페이지 별로 다른 공유페이지 사진, 설명이 나오는 경우에 활용할 수 있습니다.

 

 

 

 

 

 

 

next.js 정리 끝 ---------------------------------------------