getServerSideProps의 context를 nextjs13에서 사용하기.

새 app dir에선 리퀘스트에 접근할 수 있는 `headers()`, `cookies()` 함수를 제공합니다. `headers()`는 서버 컴포넌트에서 리퀘스트 헤더 값을 받아오는 함수고, `cookies()`는 서버 컴포넌트에서 쿠키에 접근할 수 있는 함수입니다. (첨부한 코드 참조) 자세한 내용은 Next.js 공식 문서를 보면 page dir에서 app dir로 마이그레이션 하는 챕터가 있습니다. 그 중에 accessing-request-object(https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#accessing-request-object) 쪽 문서를 살펴보시면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { cookies, headers } from 'next/headers';
 
async function getData() {
  const authHeader = headers().get('authorization');
 
  return '...';
}
 
export default async function Page() {
  // You can use `cookies()` or `headers()` inside Server Components
  // directly or in your data fetching function
  const theme = cookies().get('theme');
  const data = await getData();
  return '...';
}

Next.js 13에서는 'getServerSideProps'를 사용하지 않는 대신에 새로운 기능인 Middleware를 이용하여 'req', 'res', 그리고 'resolvedUrl'과 같은 정보를 얻을 수 있습니다. Middleware는 'getServerSideProps'와 같이 서버에서 실행되지만, 모든 요청에 대해 실행될 수 있고, 따라서 라우터별로 동작을 설정할 수 있다는 점에서 차이가 있습니다. Middleware는 'pages/_middleware.ts' 파일 (또는 '.js', '.ts')에 작성하며, 요청과 응답 객체에 직접 접근할 수 있습니다. 다음은 Middleware에서 'req', 'res', 'resolvedUrl'에 접근하는 간단한 예제입니다: 'getServerSideProps'에서 했던 일부 작업들을 위와 같이 Middleware에서 처리할 수 있습니다. 하지만, 미들웨어는 getServerSideProps와는 다르게 모든 요청에 대해 동작하므로, 성능에 민감한 작업은 주의해야 합니다. 또한, 미들웨어는 Next.js에서 제공하는 Edge Functions 기능을 통해 CDN 측에서 실행될 수 있어, 더 빠른 응답 시간을 제공합니다. Edge Functions에 대한 자세한 내용은 Next.js의 공식 문서를 참고하시면 됩니다. 이처럼 Next.js 13은 여러 새로운 기능과 변화를 도입하였기 때문에, getServerSideProps를 사용하던 기존의 코드를 옮기는 것이 다소 복잡할 수 있습니다. 새로운 패턴을 익히고 기존 코드를 적절히 수정하는 데 시간을 투자하는 것이 중요합니다.

1
2
3
4
5
6
7
8
9
10
11
import { NextRequest, NextResponse } from 'next/server'

export function middleware(req: NextRequest, res: NextResponse) {
  console.log('Resolved URL:', req.nextUrl.pathname);
  console.log('Request Headers:', req.headers);
  console.log('Response:', res);
  
  // Perform some action with these objects...

  return NextResponse.next(); // Continue to the next middleware or the route handler
}