NextJS Redirect
이전 강의에서 shortPath를 등록하는 구현을 완료했습니다. 이번에는 shortPath를 통해 원본 URL로 리다이렉트 하는 로직을 구현합니다.
NextJS AppRouter의 redirect를 활용하여 구현합니다.
1. 동적 path 등록
보통 shortURL 서비스들의 URL을 살펴보면 https://{도메인}/{shortPath} 형태를 갖습니다.
즉, shortPath는 동적 path가 됩니다.
NextJS AppRouter에서는 다음과 같은 방식으로 동적 Path를 사용합니다.
src/app 디렉토리 하위에 [path] 라는 이름의 디렉토리를 추가합니다.
AppRouter에서는 디렉토리 경로가 URL Path가 되는데 디렉토리명에 대괄호 [] 를 사용하는 경우 동적 path로 사용됩니다.
•
src/app/[path]/page.tsx
// app/[path]/page.tsx
import { redirect } from 'next/navigation'
export default function Page({ params }: { params: { path: string } }) {
redirect(`/new/${params.path}`)
}
TypeScript
복사
따라서 https://{도메인}/{shortPath} 로 접근하게 되면 [page]디렉토리 내 page.tsx에서는 params.path 변수에서 동적 path값을 가져올 수 있습니다.
위 코드는
https://{도메인}/{shortPath} 로 접근시
https://{도메인}/new/{shortPath} 로 리다이렉트 해주는 로직입니다.
이제 shortPath로 redirectURL 조회하고, redirectURL로 리다이렉트 시켜주는 로직으로 개선하면 됩니다.
2. redirectURL 조회 및 redirect
•
src/app/[path]/page.tsx
// app/[path]/page.tsx
import { redirect } from "next/navigation";
export default async function Page(props: { params: Promise<{ path: string }> }) {
const params = await props.params;
if (!params || !params.path) {
redirect("/");
}
const response = await fetch(
`https://zksnirpbgoppgoprlfdw.supabase.co/functions/v1/api/shortPath/v1/shortPath?shortPath=${params.path}`
);
if (!response.ok) {
throw new Error("API 호출에 실패했습니다.");
}
const data = await response.json();
const { redirectURL } = data;
if (redirectURL) {
redirect(redirectURL);
} else {
redirect("/");
}
TypeScript
복사
3. Version1 마무리
여기까지 Version1에서 계획했던 내용은 모두 마무리되었습니다.
잘 따라오셨다면 1개의 Supabase 프로젝트와 개발/배포방법을 배우셨을겁니다.. NextJS 에서도 프로젝트를 생성하고 개발 배포하는 방법을 배우셨을겁니다.
Version1의 강의 내용은 머나먼 서비스 고도화의 길 중 첫 발자국일 뿐입니다. 앞으로 로그인 기능을 활용한 유저 기반 서비스, 로깅, 오류처리 등 다양한 고도화가 필요합니다.
아직 갈길이 멀지만 Supabase와 NextJS에 친숙해지고 언제든지 새로운 아이디어가 있을때 빠르게 MVP를 출시할 수 있는 능력을 갖춘 연수생이 되셨으면 합니다 
끝.