How to deal with NextJS exporting files with .html extension but in there is no .html

by

The default in next.js for static generation is to map this code:

/pages/p1.tsx

to this file:

/p1.html

The problem with that is that a link to /p1 will work when you use the next server, and will fail when you’re serving static files.

If you enable this, in next.config.js:

module.exports = {trailingSlash: true,}

Then you’ll get a different file:

/p1/index.html

And on most generic web servers (Apache out of the box, for example), you get this behavior:

/p1 - redirects to /p1/
/p1/ - serves /p1/index.html
/p1/index.html - serves /p1/index.html

So I think module.exports = {trailingSlash: true,} gets you the behavior you’re expecting.

(@jdaz’s link to the other answer is definitely useful for this, but that question was very specifically about configuring .htaccess, so I’m repeating a similar answer here)

More Related Contents:

  1. Window is not defined in Next.js React app
  2. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  3. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  4. How to properly set environment variables in Next.js app deployed to Vercel?
  5. Warning: Function components cannot be given refs
  6. How to access route parameter inside getServerSideProps in Next.js?
  7. Next.js ISR ( Incremental Static Regeneration ), how to rebuild or update a specific page manually or dynamically before the interval/ISR time start?
  8. Environment variables not working (Next.JS 9.4.4)
  9. How to generate dynamic paths for non-default locales in Next.js?
  10. Next.js context provider wrapping App component with page specific layout component giving undefined data
  11. How to use cookie inside `getServerSideProps` method in Next.js?
  12. unable to deploy next js to azure
  13. How to Set port in next.js
  14. What is the best way to have a fallback image in NextJS?
  15. next.js environment variables are undefined (Next.js 10.0.5)
  16. Next.js: Error: React.Children.only expected to receive a single React element child
  17. Import ES module in Next.js ERR_REQUIRE_ESM
  18. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  19. how to add domains to next.config.js for “next/image” while using a plugin
  20. how can I use top level “await” in typescript next.js
  21. Is it possible to put test files under pages directory in Next.js?
  22. What’s the difference between exposing environment variables in nextjs through the next.config.js vs with the NEXT_PUBLIC prefix?
  23. TypeError [ERR_INVALID_URL]: Invalid URL using Next-auth only in Production
  24. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  25. How to prevent Next.js from instantiating a singleton class/object multiple times?
  26. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  27. How to avoid caching in the app directory of Next.js?
  28. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined
  29. Want to have an event handler for the browser’s back button with next.js
  30. Next.js, getStaticProps not working with component but does with page

Leave a Comment