[NextJs] 라우터 기능에 대해 빠르게 알아보자

     

목차

병렬 라우팅

같은 폴더에서 @로 시작하는 폴더를 만들어 주면 병렬 라우팅이 가능하다.

병렬 라우팅은 라우터 경로에 포함되지 않는다.

 

그루 레이아웃에서 그 이름으로 불러와서 사용하면 된다.

export default function ArchiveLayout({ archive, latest }) {
  return (
    <div>
      <h1>News Archive</h1>
      <section id="archive-filter">{archive}</section>
      <section id="archive-latest">{latest}</section>
    </div>
  );
}

 

 

이런식으로 한번에 페이지가 보이는 것을 볼 수 있다.

 

 

라우터 파람 배열로 받기

 

export default async function FilteredNewsPage({ params }) {
  const filter = (await params).filter;
  console.log(filter);
  const selectedYear = filter?.[0];
  const selectedMonth = filter?.[1];

 

아래와 같이 배열로 들어오는 것을 확인할 수 있다.

 

 

라우터 인터셉터 사용하기

사용 예시)

아래와 같이 작동하는 인스타 페이지를 본 적이 있을 수 있다.

처음 image로 들어갈 때 image 모달이 뜨고 

새로고침을 하거나 바깥쪽을 누를 경우 image url에서 바뀌게 된다.

이미지를 눌러 처음 들어갔을 때

 

새로고침을 눌렀을 때

 

 

병렬 라우팅을 이용해 먼저 최상단에 레이아웃을 설정하자

export default function NewsDetailLayout({ children, modal }) {
  return (
    <>
      {modal}
      {children}
    </>
  );
}

 

 

(.)폴더명을 사용하면 라우터 인터셉터를 통해 가로챌 수 있다.

 

(.)image/page.js

가로채서 모달이 보일 페이지이다.

import { DUMMY_NEWS } from "@/dummy-news";
import {  notFound } from "next/navigation";
import Modal from "@/components/modal/modal";

export default async function InterceptedImagePage({ params }) {
  const newsItemSlug = (await params).slug;
  const newsItem = DUMMY_NEWS.find((item) => item.slug === newsItemSlug);
  if (!newsItem) {
    notFound();
  }
  return (
    <>
      <Modal newsItem={newsItem} />
    </>
  );
}

 

image/page.js

새로고침 시에 보일 페이지이다.

import Image from "next/image";
import { DUMMY_NEWS } from "@/dummy-news";

export default async function ImagePage({ params }) {
  const newsItemSlug = (await params).slug;
  const newsItem = DUMMY_NEWS.find((item) => item.slug === newsItemSlug);
  
  if (!newsItem) {
    notFound();
  }
  return (
    <div className="fullscreen-image">
      <Image
        src={`/images/news/${newsItem.image}`}
        alt={newsItem.title}
        width={800}
        height={700}
      />
    </div>
  );
}

 

 

 

default.js

아래와 같이 해야 이미지를 아직 안누른 상세 페이지에서 모달이 null로 불러와져 오류가 생기지 않는다.

export default function ModalDefaultPage(){
    return null;
}

 

 

라우팅 그룹으로 묶기

한 라우터 그룹에서는 헤더가 보이게 하고 다른 라우터 그룹에서는 헤더가 보이게 하고 싶지 않을 수 있다.

이때 폴더이름을 ()에 넣어 사용하면 된다.

각각의 레이아웃을 사용해 주자

 

 

라우터 핸들러 사용하기

라우터 핸들러를 통해 요청을 보내고 응답을 받을 수 있다.

GET, POST, DELETE 등 함수명은 지정되어 있다.

api 폴더에서 route.js로 이름을 지정하자

 

export function GET(request) {
  console.log(request);
  return new Response("hello!");
}

export function POST() {}

 

 

라우터 미들웨어 사용하기

라우터 요청에 따른 전처리를 할 수 있다.

import { NextResponse } from "next/server";

export function middleware(request) {
  console.log(request);
  return NextResponse.next();
}

//수신하는 요청의 전처리
export const config = {
  matcher: "/news",
};

 

위와 같이 설정해 주면 "/news"와 관련된 api 요청만 콘솔에 뜨게 된다.