Furquan
Furquan

Reputation: 1852

How to rewrite request after next-intl middleware receives it

I have next-intl setup in my project and its working fine. Now I have some urls(onelink urls with query params) that I want to deeplink so that those URL's can land on specific screens.

I am getting response from next-intl middleware, now from here I want to open some specific screens

below is the next-intl middleware code that I have , at step four I want to rewrite the url

import createIntlMiddleware from 'next-intl/middleware';
import {NextRequest} from 'next/server';
 
export default async function middleware(request: NextRequest) {
  // Step 1: Use the incoming request
  const defaultLocale = request.headers.get('x-default-locale') || 'en';
 
  // Step 2: Create and call the next-intl middleware
  const handleI18nRouting = createIntlMiddleware({
    locales: ['en', 'de'],
    defaultLocale
  });
  const response = handleI18nRouting(request);
 
  // Step 3: Alter the response
  response.headers.set('x-default-locale', defaultLocale);

  //Step 4: rewrite the request with correct path (path build separately)
   NextResponse.rewrite(new URL('/new-path/id', request.url))

  //return response;
  return NextResponse;
}
 
export const config = {
  matcher: ['/((?!_next|.*\\..*).*)']
};

Upvotes: 4

Views: 3318

Answers (1)

mike_t
mike_t

Reputation: 2691

I was facing the same issue and was able to find only a slightly hacky way to accomplish this, as suggested by the owner of next-intl project

Applied to your example:

import createIntlMiddleware from 'next-intl/middleware';
import {NextRequest} from 'next/server';
     
export default async function middleware(request: NextRequest) {
      
  const defaultLocale = request.headers.get('x-default-locale') || 'en';
     
  const handleI18nRouting = createIntlMiddleware({
    locales: ['en', 'de'],
    defaultLocale
  });

  const response = handleI18nRouting(request);
     
  response.headers.set('x-default-locale', defaultLocale);

  /// REDIRECT USING x-middleware-rewrite HEADERS
  const url = new URL(`/new-path/id`, request.url);
  response.headers.set('x-middleware-rewrite', url.toString());

  return response;      
}
     
export const config = {
    matcher: ['/((?!_next|.*\\..*).*)']
};

Upvotes: 4

Related Questions