3

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.

enter image description here

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

enter image description here

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

cooskun
  • 558
  • 1
  • 5
  • 20
  • Does this answer your question? [How to deal with NextJS exporting files with .html extension but in there is no .html](https://stackoverflow.com/questions/62867105/how-to-deal-with-nextjs-exporting-files-with-html-extension-but-inlink-there) – Cesare Polonara Jun 09 '22 at 16:19

2 Answers2

2

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'],
  1. Rename the file under pages directory to .html.js - search-results.html.js in this case.
Ramakay
  • 2,919
  • 1
  • 5
  • 21
  • 2
    Technically, you don't need to add `html` to `pageExtensions`. Simply having a file named `search-results.html.js` under the `pages` folder would work. – juliomalves Jun 13 '22 at 17:39
  • Not sure about js, it doesn't work with tsx files – Sisir Dec 28 '22 at 12:57
0

This naming convention search-result.html is not allowed for public sub-directories . There are some ways of showing html file in next but I'm not sure they will workcheck this

But you can easily copy everything inside your <body> tag inside your Next js project and it will work properly . How ever you have to manually add your <meta> and other head tags inside Next js built in <Head/> component .

Moein Moeinnia
  • 1,945
  • 3
  • 10
  • 26