Next.js 13 에서 NextResponse 사용 방법

해당 글은 App Router 방식을 따르고 있습니다.

cookies

response의 Set-Cookie 헤더를 읽거나 변경한다.

set(name, value)

name과  value에 값을 넣어 쿠키를 설정한다.

 

// /home 들어오는 요청이 주어지면
let response = NextResponse.next();
// 배너를 숨기도록 쿠키 설정
response.cookies.set('show-banner', 'false; HttpOnly; Secure;'); // 옵션은 값 옆에 ; 을 붙이면 된다
// 위 코드는 Response에 `Set-Cookie:show-banner=false; HttpOnly; Secure; path=/home` 헤더가 있다와 같은 말이다.
return response;

 

get(name)

쿠키 name이 주어지면 쿠키 값을 반환한다. 쿠키를 찾을 수 없으면 undefined가 반환되며, 여러 쿠키가 발견되면 첫 번째 쿠키가 반환된다.

 

// /home 들어오는 요청이 주어지면
let response = NextResponse.next();
// { name: 'show-banner', value: 'false; HttpOnly; Secure;', Path: '/home' } 값을 불러온다.
response.cookies.get('show-banner');

 

getAll()

쿠키 name이 주어지면 쿠키 값을 반환한다. name을 지정하지 않으면 응답에 모든 쿠키를 반환한다.

 

// /home 들어오는 요청이 주어지면
let response = NextResponse.next();
// [
//   { name: 'experiments', value: 'new-pricing-page', Path: '/home' },
//   { name: 'experiments', value: 'winter-launch', Path: '/home' },
// ] 쿠키 이름이 experiments 인걸 모두 불러온다
response.cookies.getAll('experiments');
// name을 안 적은 경우 응답에 대한 모든 쿠키 가져오기
response.cookies.getAll();

 

delete(name)

쿠키 name을 넣어주면 쿠키를 삭제한다.

 

// /home 들어오는 요청이 주어지면
let response = NextResponse.next();
// 삭제된 경우 true 반환, 아무것도 삭제되지 않은 경우 false 반환
response.cookies.delete('experiments');

 

json()

주어진 JSON body로 response을 생성한다.

 

import { NextResponse } from 'next/server';
 
export async function GET(request: Request) {
  return NextResponse.json({ hello: 'Next.js' });
  
  // 만약 에러가 났을 때 코드를 적고 싶다면,
  // return NextResponse.json({ hello: 'Next.js' }, {status: 500}); 이런식으로 가능하다
}

 

redirect()

URL로 redirect 되는 response을 생성한다.

 

import { NextResponse } from 'next/server';
// 기본 사용 
return NextResponse.redirect(new URL('/new', request.url));

 

URL은 NextResponse.redirect() 메서드에서 사용되기 전에 만들고 수정할 수 있다.

예를 들어, request.nextUrl 속성을 사용하여 현재 URL을 가져온 다음 수정하여 다른 URL로 redirect 할 수 있다.

 

import { NextResponse } from 'next/server';
 
// 들어오는 요청이 있는 경우
const loginUrl = new URL('/login', request.url);
// ?from=/incoming-url을 /login URL에 추가한다. => /login?from=/incoming-url 이런 형태로 새 URL이 만들어진다.
loginUrl.searchParams.set('from', request.nextUrl.pathname);
// 그리고 새 URL로 redirect 한다.
return NextResponse.redirect(loginUrl);

 

rewrite()

원래 URL을 표시하면서 주어진 URL을 다시 작성(프록시)하는 response를 생성한다.

 

import { NextResponse } from 'next/server';
 
// request.url이 /about 이라 했을 때
// 들어오는 요청: /about, 브라우저 /about 표시
// rewrite된 요청: /proxy, 브라우저 /about 표시
return NextResponse.rewrite(new URL('/proxy', request.url));

 

next()

 조기에 반환하고 라우팅을 계속할 수 있기 때문에 next() 메서드는 미들웨어에 유용하다.

미들웨어는 말 그대로 중간에 값을 끼워 넣을 수 있는 것을 말한다.

 

import { NextResponse } from 'next/server';
 
//기본 사용
return NextResponse.next();

 

응답을 생성할 때 헤더를 전달할 수도 있습니다.

 

import { NextResponse } from 'next/server';
 
// 들어오는 요청이 있는 경우
const newHeaders = new Headers(request.headers);
// 새 header 추가
newHeaders.set('x-version', '123');
// 그리고 새 headers로 response를 생성합니다.
return NextResponse.next({
  request: {
    // 새 요청 headers
    headers: newHeaders,
  },
});

 

대략적으로 공식문서에 주요하게 써놓은 것들이다. NextResponse 모체는 Web Response API이다. 그래서 여기 나온 것뿐만이 아닌 다른 Response 명령어(예시 : NextResponse.error())도 사용가능 하다.

 

출처 : Next.js 공식문서