Next.js 13 <Link /> with Middleware

💡 Issue : <Link /> 태그를 사용할 때 화면이 이동 하기 전, 조건에 따라 화면 이동을 제어 하고 싶다면?

 

🌟 Middleware 를 사용하자!

 

Middleware

: request를 완료하기 전에 코드를 실행할 수 있게 해주는 역할.
들어오는 request에 따라, request 또는 응답 헤더를 재작성, redirecting, 수정하거나 직접 응답하여 response를 수정할 수 있습니다.
 Middleware는 캐시된 content와 경로가 일치해지기 전에 실행됩니다.
 사용자를 다른 페이지로 이동 시키기 위한 목적이 있거나 인증이 필요할 때, Middleware를 사용하는 것이 일반적이다.
👉🏼 <Link /> 컴포넌트가 미들웨어를 통해 미리 제대로 fetching 하게 하려면, Next.js에게 화면에 보여줄 url과 미리 fetching할 url 모두를 전달해야 합니다.

예를 들어, 인증된 사용자와 방문자의 대시보드 화면을 분기 해야 하는 경우 아래와 같이 코드를 작성할 수 있습니다.

// middleware.js (프로젝트 최상단에 위치)
export function middleware(req) {
	const nextUrl = req.nextUrl
    	if(nextUrl.pathname === '/dashboard') {
            if(req.cookies.authToken) {
                return NextResponse.rewrite(new URL('/auth/dashboard', req.url))
            } else {
                return NextResponse.rewrite(new URL('/public/dashboard', req.url))
            }
        }
}

이러한 상황을 페이지 화면에서 코드를 작성하게 된다면,

// Page.js
import Link from 'next/link'
import useIsAuthed from './hooks/useIsAuthed'

export default function Page() {
	const isAuthed = useIsAuthed()
	const path = isAuthed ? '/auth/dashboard' : '/dashboard'
        return (
            <Link as="/dashboard" href={path}>
                Dashboard
            </Link>
        )
}

 

동적 라우팅을 사용하는 경우에는 as 와 href  props가 필요합니다. Dynamic Route를 middleware를 이용해 다르게 표시하고 싶다면 아래와 같이 코드를 작성할 수 있습니다.

<Link href={{ pathname: '[목적 주소]', query: { key: [value] } }} as='[노출될 주소]'>[링크명]</Link>

그리고 이를 Next.js 공식 문서에 나온 예시와 같이 확인해보면, 아래와 같습니다.

<Link href={{ pathname: '/dashboard/authed/[user]', query: { user: username } }} as="/dashboard/[user]">Profile</Link>

 

 

References..

https://nextjs.org/docs/app/building-your-application/routing/middleware

https://nextjs.org/docs/app/building-your-application/routing/middleware#matching-paths