Next.js에서 리셋 방향 집합

개요
Next.js의 방향을 바꾸는 방법을 총괄해 봅시다.
기본적으로 루트 파일_app.tsx을 사용합니다.
Next.js+TypeScript입니다.
useEffect
_app.tsx

import React from 'react'

function MyApp({ Component, pageProps, router }: AppProps) {
  React.useEffect(() => {
    if (router.asPath === '/xxx') {
      router.push('/ooo')
    }
  }, [router.asPath])
  return <Component {...pageProps} />
}

이 방법은 매우 간단하지만, 한순간에 원래의 페이지를 볼 수 있다.
이것은 useEffect hooks의 렌더링 결과가 화면에 반영된 후에 실행되는 특성 때문이다.
getInitialProps
_app.tsx

import App, { AppProps, AppContext } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

MyApp.getInitialProps = async (appContext: AppContext) => {
  const appProps = await App.getInitialProps(appContext)
  const {
    ctx,
    router: { asPath },
  } = appContext
  // 対象パスにきたとき
  if (asPath === '/xxx') {
    ctx.res?.writeHead(302, {
      // リダイレクト先
      Location: '/ooo',
    })
    ctx.res?.end()
    return
  }
  return { ...appProps }
}

getInitialProps 서버에서 실행됩니다.
클라이언트가 렌더링하기 전에 방향을 바꿀 수 있습니다.
middleware
Next.jsv12에서middleware 기능을 가져왔습니다.middleware에 적힌 처리는 요청이 완료되기 전에 실행할 수 있습니다.
_middleware.ts

import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'

export function middleware(request: NextRequest) {
  const url = request.nextUrl.clone()
  const pathname = url.pathname
  if (pathname === '/xxx') {
    url.pathname = '/ooo'
  }
  return NextResponse.rewrite(url)
}

URL을 복제하는 이유는 여기.에 적혀 있습니다.
끝말
Next.만세!