How to add a page route with html extension on nextjs

Question

I need to convert a non-nextjs page to nextjs. In order to not lose my SEO ranking, I have to create the route with html extension. To make the picture look better, I am adding the folder structure down below.

Unfortunately, this route ending up as 404 on the browser.

What is the problem? Am I allowed to use Next.js routes like that with html extension?

Answer 1

You can do this via the pageExtensions option in nextJS -

I deployed a vercel app to show how this is working

https://html-ext.vercel.app/search-results.html

Steps

1. Add the pageExtensions to next.config.js files i.e

pageExtensions: ['html', 'jsx', 'js', 'tsx', 'ts'],

2. Rename the file under pages directory to .html.js - search-results.html.js in this case.