How to redirect in Next.js from uppercase to lowercase url

Question

How to redirect in Next.js from uppercase to lowercase url

I'm trying to redirect visitors from /Contact to /contact.

However, following the instructions in the documentation results in an endless loop of redirects.

This is my attempted solution:

// next.config.js
async redirects() {
    return [
        {
            source: '/Contact',
            destination: '/contact',
            permanent: true
        }
    ]
}

javascript reactjs next.js http-status-code-301 vercel

Answer 1

Answer №1

Utilizing Next.JS version 12 or higher, you have the ability to incorporate custom middleware.

To do so, simply create a file named middleware.js within your root directory and input the following code snippet:

import { NextResponse } from 'next/server';

const Middleware = (req) => {
  if (req.nextUrl.pathname === req.nextUrl.pathname.toLowerCase())
    return NextResponse.next();

  return NextResponse.redirect(new URL(req.nextUrl.origin + req.nextUrl.pathname.toLowerCase()));
};

export default Middleware;

Answer 2

Utilizing Next.JS version 12 or higher, you have the ability to incorporate custom middleware.

To do so, simply create a file named middleware.js within your root directory and input the following code snippet:

import { NextResponse } from 'next/server';

const Middleware = (req) => {
  if (req.nextUrl.pathname === req.nextUrl.pathname.toLowerCase())
    return NextResponse.next();

  return NextResponse.redirect(new URL(req.nextUrl.origin + req.nextUrl.pathname.toLowerCase()));
};

export default Middleware;

Answer 3

Answer №2

If a path does not exist, the following code snippet will automatically redirect it to a lower case path and display a 404 error message if the path is still not found.

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import Error from 'next/error'

export default function ResolveRoute() {
  const router = useRouter()

  useEffect(() => {
    const { pathname } = router;

    if (pathname !== pathname.toLowerCase()) {
      router.push(pathname.toLowerCase())
    }
  },[router])

  return <Error statusCode={404} />
}

To implement this functionality, save the file as "[route].js" in the pages folder of your project. This setup will serve as a universal catch-all for paths that do not have corresponding pages. It will automatically redirect any non-existing paths to their lower case version, and display a 404 error page if needed.

Answer 4

If a path does not exist, the following code snippet will automatically redirect it to a lower case path and display a 404 error message if the path is still not found.

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import Error from 'next/error'

export default function ResolveRoute() {
  const router = useRouter()

  useEffect(() => {
    const { pathname } = router;

    if (pathname !== pathname.toLowerCase()) {
      router.push(pathname.toLowerCase())
    }
  },[router])

  return <Error statusCode={404} />
}

To implement this functionality, save the file as "[route].js" in the pages folder of your project. This setup will serve as a universal catch-all for paths that do not have corresponding pages. It will automatically redirect any non-existing paths to their lower case version, and display a 404 error page if needed.

Answer 5

Answer №3

After receiving a helpful suggestion from a Reddit user, I was able to resolve a case sensitivity issue with Next.js routing. The solution involved utilizing the _error.js page component in the following manner:

import { hasUpperCase } from '../lib/string';

...

Error.getInitialProps = ({ asPath, err, res }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;

  if (asPath && hasUpperCase(asPath)) {
    res.writeHead(307, { Location: asPath.toLowerCase() });
    res.end();
  }

  return { statusCode };
};

export default Error;

Although I appreciate this approach, I would also be interested in exploring alternatives like using redirects similar to your example.

Answer 6

After receiving a helpful suggestion from a Reddit user, I was able to resolve a case sensitivity issue with Next.js routing. The solution involved utilizing the _error.js page component in the following manner:

import { hasUpperCase } from '../lib/string';

...

Error.getInitialProps = ({ asPath, err, res }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;

  if (asPath && hasUpperCase(asPath)) {
    res.writeHead(307, { Location: asPath.toLowerCase() });
    res.end();
  }

  return { statusCode };
};

export default Error;

Although I appreciate this approach, I would also be interested in exploring alternatives like using redirects similar to your example.

Answer 7

Answer №4

For those facing this issue, I came across a helpful resource that provides multiple solutions: https://www.youtube.com/watch?v=_vSMITiXAik Solution 1:

Utilize the rewrite function in your next.config.js

    return [
      {
        source: "(c|C)(o|O)(n|N)(t|T)(a|A)(c|C)(t|T)",
        destination: "/Contact", // Be sure to specify the exact page (contact or Contact)
      },
    ];
  },

Implement the _middleware feature: within your pages folder, add a _middleware.ts file.

import { NextRequest, NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === request.nextUrl.pathname.toLocaleLowerCase())
    return NextResponse.next();
  return NextResponse.redirect(
    `${request.nextUrl.origin}${request.nextUrl.pathname.toLocaleLowerCase()}`
  );
}

By following this solution, you will need to ensure that your page names are all lowercase.

Employ the middleware feature alongside a separate folder for each page.

You must maintain the _middleware.ts and carry out these steps:

Create a folder named contact in all lowercase letters.
Transfer your page into this folder.
Add an index.ts that points to your page with content similar to:

export { default } from "./contact";

Rename all your pages using the extension: .page.tsx or page.ts (for TypeScript), and .page.jsx or page.js (for JavaScript).

In your next.config.js, include:

pageExtensions: ["page.tsx", "page.ts"]

(if using TypeScript) or

pageExtensions: ["page.jsx", "page.js"]

(if using JavaScript).

This process should be applied to all pages.

Answer 8

For those facing this issue, I came across a helpful resource that provides multiple solutions: https://www.youtube.com/watch?v=_vSMITiXAik Solution 1:

Utilize the rewrite function in your next.config.js

    return [
      {
        source: "(c|C)(o|O)(n|N)(t|T)(a|A)(c|C)(t|T)",
        destination: "/Contact", // Be sure to specify the exact page (contact or Contact)
      },
    ];
  },

Implement the _middleware feature: within your pages folder, add a _middleware.ts file.

import { NextRequest, NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === request.nextUrl.pathname.toLocaleLowerCase())
    return NextResponse.next();
  return NextResponse.redirect(
    `${request.nextUrl.origin}${request.nextUrl.pathname.toLocaleLowerCase()}`
  );
}

By following this solution, you will need to ensure that your page names are all lowercase.

Employ the middleware feature alongside a separate folder for each page.

You must maintain the _middleware.ts and carry out these steps:

Create a folder named contact in all lowercase letters.
Transfer your page into this folder.
Add an index.ts that points to your page with content similar to:

export { default } from "./contact";

Rename all your pages using the extension: .page.tsx or page.ts (for TypeScript), and .page.jsx or page.js (for JavaScript).

In your next.config.js, include:

pageExtensions: ["page.tsx", "page.ts"]

(if using TypeScript) or

pageExtensions: ["page.jsx", "page.js"]

(if using JavaScript).

This process should be applied to all pages.

Answer 9

Answer №5

Check out this elegant solution that not only preserves any search or query parameters:

import { NextResponse } from 'next/server';

const Middleware = (req) => {
  if (req.nextUrl.pathname !== req.nextUrl.pathname.toLowerCase()) {
    const url = req.nextUrl.clone()
    url.pathname = url.pathname.toLowerCase()
    return NextResponse.redirect(url)
  }
  return NextResponse.next();
};

export default Middleware;

Answer 10

Check out this elegant solution that not only preserves any search or query parameters:

import { NextResponse } from 'next/server';

const Middleware = (req) => {
  if (req.nextUrl.pathname !== req.nextUrl.pathname.toLowerCase()) {
    const url = req.nextUrl.clone()
    url.pathname = url.pathname.toLowerCase()
    return NextResponse.redirect(url)
  }
  return NextResponse.next();
};

export default Middleware;

Answer 11

Answer №6

Although I appreciated Andrew's input, I am leaning more towards a server-side solution rather than a client-side one.

Based on Andrew's feedback, I implemented the following:

import Custom404 from "./404";

export default function CatchAllRoutes({url}) {
    return <Custom404 />
}

export async function getServerSideProps(context) {
    const url = context.query.catch;
    const { res } = context;
    if (url !== url.toLowerCase()) {
        res.writeHead(307, {location: `/${url.toLowerCase()}`}) // 307 is temporary while 308 is permanent, choose your preference here..
        res.end();
    } 
    else {
        context.res.statusCode = 404;
    }
    return { props: { url } }; // Note: You don't need a prop, but the name of function requires one..
}

I saved this code in a file named [catch].js at the root of my pages directory. If the requested URL does not match any page in the project, and it is not already lowercase, it gets converted to lowercase and redirected. Otherwise, if it's a 404, we set the status code to 404 and display the custom404 component.

Answer 12

Although I appreciated Andrew's input, I am leaning more towards a server-side solution rather than a client-side one.

Based on Andrew's feedback, I implemented the following:

import Custom404 from "./404";

export default function CatchAllRoutes({url}) {
    return <Custom404 />
}

export async function getServerSideProps(context) {
    const url = context.query.catch;
    const { res } = context;
    if (url !== url.toLowerCase()) {
        res.writeHead(307, {location: `/${url.toLowerCase()}`}) // 307 is temporary while 308 is permanent, choose your preference here..
        res.end();
    } 
    else {
        context.res.statusCode = 404;
    }
    return { props: { url } }; // Note: You don't need a prop, but the name of function requires one..
}

I saved this code in a file named [catch].js at the root of my pages directory. If the requested URL does not match any page in the project, and it is not already lowercase, it gets converted to lowercase and redirected. Otherwise, if it's a 404, we set the status code to 404 and display the custom404 component.

Answer 13

Answer №7

Upon encountering this issue, I observed that NextJS automatically adds a trailing slash to the paths. Checking the network console in the browser revealed requests with 307 and 308 status codes alternating. Adding a trailing slash to the destination path resulted in numerous requests with a status of 307, but errors persisted.

After appending trailing slashes to both the source and destination paths, the redirection worked correctly:

// next.config.js
async redirects() {
    return [
        {
            source: '/Contact/',
            destination: '/contact/',
            permanent: true
        }
    ]
}

Answer 14

Upon encountering this issue, I observed that NextJS automatically adds a trailing slash to the paths. Checking the network console in the browser revealed requests with 307 and 308 status codes alternating. Adding a trailing slash to the destination path resulted in numerous requests with a status of 307, but errors persisted.

After appending trailing slashes to both the source and destination paths, the redirection worked correctly:

// next.config.js
async redirects() {
    return [
        {
            source: '/Contact/',
            destination: '/contact/',
            permanent: true
        }
    ]
}

How to redirect in Next.js from uppercase to lowercase url

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Uncovering unseen tags generated by JavaScript on a webpage using Python

TAILWINDCSS: Is there a way to prevent the page from shrinking beyond a certain breakpoint? Take a look at the images provided for visual

Accessing a model's field within an Ember.js each loop

Transforming the AngularJS $http GET method to OPTION and including custom headers

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

How can I prevent clearQueue() from removing future queues?

Unable to authenticate the initial certificate with Node

Passing Node.js MySQL query results to the next function within an async.waterfall workflow

I am encountering a JQuery syntax error while using Bootstrap 3 button-dropdown links

I am facing an issue with TypeScript as it is preventing me from passing the prop in React and Zustand

I am looking to modify the highlighted table cell whenever the value within it changes

Filter the output from a function that has the ability to produce a Promise returning a boolean value or a

Rotate the circular border in a clockwise direction when clicked

Constructing and rendering PDFs with c# and React

Checkbox Hierarchy: Children marked as either Checked or Unchecked based on parent selection

Show the current temperature data retrieved from the weather API

When combining CSS grids, nesting them can sometimes cause issues with the height layout

A guide to implementing react-hook-form in conjunction with form actions

Rendering a component within an asynchronous function using Next.js

Why won't the function activate on the initial click within the jQuery tabs?