How to handle the discrepancy between NextJS exporting files with a .html extension, yet in the <Link> component there is no .html specified

I have been working on my NextJS application and I've realized that all the links within it are built using the 

<Link href="/my-page"><a>My page</a></Link>
component. After exporting the app to generate a static site, I noticed that the pages in the out folder have a .html extension. This poses a problem because while a link might be pointing to /my-page, the actual page is /my-page.html. How can I effectively handle this issue? Is there a way for NextJS to address this or do I need to manually change all my anchor tags to use /my-page.html?

Any advice would be greatly appreciated.

javascriptnext.js

Answer №1

In next.js, the default setting for static generation involves mapping code like this:

/pages/p1.tsx

To a file named:

/p1.html

However, there is a drawback to this approach. A link to /p1 will function correctly when using the next server, but it will fail when serving static files.

To address this issue, you can enable the following in your next.config.js file:

module.exports = {trailingSlash: true,}

By doing so, you will receive a different file structure:

/p1/index.html

This configuration results in the following behavior on most generic web servers (such as Apache by default):

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

Therefore, utilizing 

module.exports = {trailingSlash: true,}
should give you the desired outcome.

(@jdaz's reference to another answer may be helpful, but that response was specifically focused on configuring .htaccess. I am reiterating a similar solution tailored to this context.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtaining the following class name from elements

I am struggling with extracting classes from a block of HTML code: <div class="container"> <div class="item first">...</div> <div class="item second">...</div> <div class="item third">...</div> <div cla ...

javascriptjquery

Deactivating the idle timer in React Native: A Step-by-Step Guide

Currently, I am working on an app that involves a timer using RN. However, I have noticed that after approximately 1 minute and 50 seconds, the device's screen starts to dim in preparation for sleep mode. ...

javascriptreactjsnative

What is the procedure for placing an item into a vacant area in react-dnd?

Looking to create a drag and drop list using react-dnd. Manage to put together an example: visit codesandbox example here Currently facing one issue: Unable to drop an item into an empty section. If trying to move image1 to the first or third group, un ...

javascriptreactjsdrag-and-dropreact-dndsortablejs

Attempting to incorporate Font-Awesome Icons into the navigation bar tabs

As a newcomer to React, I've been attempting to incorporate Font Awesome icons into my secondary navigation bar. Despite using switch-case statements to iterate through each element, all the icons ended up looking the same, indicating that only the de ...

javascripthtmlreactjsxmlfont-awesome

Error encountered during Yarn installation process: The tunneling socket was unable to be established due to a connection refusal on localhost at port 80

I have a Next.js app that needs to be built on our company servers before deployment. We use a proxy, and I've configured yarn to use the proxy as well. yarn config set proxy http://xx.xxx.xx:xxxx yarn config set httpsProxy http://xx.xxx.xx:xxxx yarn ...

javascriptreactjsnpmnext.jsyarnpkg

"Explore the Hong browser designed specifically for enhanced Ajax functionality

I made the decision to revamp my new job by incorporating Ajax into the mix. Here is the code snippet I used to load pages: html <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" ...

javascriptjqueryajax

Exploring the World of Dynamic Table ID Access in Rails 5 with Coffeescript

Within my Index view, I have a table that I want to dynamically populate with an ID. This is what I've attempted so far: id="table_<%= @controller_name %>" The method in my controller looks like this: def get_controller_name @controller_nam ...

javascriptruby-on-railscoffeescript

Is the presence of a potential leak suggested by this arrangement in the heap snapshot retainer hierarchy

While analyzing a Heap snapshot, I came across a retainer hierarchy that looks like this: Is it possible that the MuiThemeProviderOld element (highlighted in yellow and from the @material-ui/core library) is causing a memory leak for my gui instance as sh ...

javascriptreactjsmemory-leaksgoogle-chrome-devtoolsmaterial-ui

Issue with Angular 5 - Deselect all checkboxes not reflecting in the UI

I am currently working on integrating a reset button into a Reactive form in Angular 5. The reset functionality works flawlessly for all form fields, except for the dynamically created multiple checkboxes. Although it seems like the reset operation is hap ...

javascriptangularcheckboxangular5

Validation of Regular Expressions in Javascript

I am trying to implement control validation using Javascript. The validation criteria states that the number should consist of a maximum of 12 digits, with the first 7 being '9900000' followed by either a '0' or a '1', and en ...

javascriptregexvalidationcontrols

Determine if a specific value is present within an array consisting of multiple objects using Mongoose

In my collection, I have a scenario where I need to utilize the $in operator. Person = { name: String, members: [ {id: String, email: String}... {}] } Currently, I am using the following: Person.find({members: {"$in": [id1]}}) However, I am aware of ...

javascriptarraysnode.jsmongodb

What is the optimal location for storing JSON data while dynamically loading via AJAX?

Let's imagine a scenario where there is an HTML page hosting a dynamic modal box. Clicking on different links within the page triggers the modal to open, each showing different content based on the clicked link. The dialog contents are fetched using A ...

javascripthtmljsonmodel-view-controller

What sets apart the JavaScript console from simply right-clicking the browser and opting for the inspect option?

As I work on developing an angular application, one of my tasks involves viewing the scope in the console. To do this, I usually enter the code angular.element($0).scope(). This method works perfectly fine when I access the console by right-clicking on th ...

javascriptangularjsgoogle-chromegoogle-chrome-devtoolsdeveloper-console

The Sign-In Error in Firebase is Concealing the True Issue in useSignInWithEmailAndPassword function within a React Web Application Project

I am facing an issue with throwing an error when attempting to register an account with a previously used email using TypeScript, Firebase, and React. Despite successfully registering an account, the problem arises when I try to use the same email with a d ...

reactjsfirebasenext.jsfirebase-authenticationreact-typescript

Filter an array using regular expressions in JavaScript

Currently, I am facing a challenge in creating a new array of strings by filtering another array for a specific pattern. For example: let originalString = "4162416245/OG74656489/OG465477378/NW4124124124/NW41246654" I believe this pattern can be ...

javascriptarrayssplit

Utilize a JSON file to generate a network visualization using the vis.js library

I am currently working with vis.js to generate a visualization. In the example code, I am using the file saveAndLoad.html. The save function works well as it allows me to export a json file. However, I am encountering an issue when trying to load the jso ...

javascriptjsonvis.js

Load images easily using jQuery

I am experiencing a small problem. I am attempting to display an image, but it doesn't seem to be correct. Although I am able to retrieve the data of the image, my goal is just to display it instead. What could be causing this issue? var imageUrl = ...

javascriptjquery

Tips for adjusting the autocomplete maxitem dynamically

I am working on a multi autocomplete feature and I have the following code. Is there a way to dynamically set the maximum number of items based on the value entered in another text field? <script> $(function () { var url2 = "<?php echo SI ...

javascriptphpjquery

The primary directory specified in the package.json file

Question: I have a pre-existing library that I want to turn into an NPM module. Currently, the library is being required through the local file system. How can I specify the main directory path for my module's files? If my structure looks like this: ...

javascriptnode.jsnpmpackage.json

Browsing HTML Documents with the Click of a Button

After collecting JSON data from a SharePoint list, I am currently in the process of creating an HTML Document. At this point, I have completed approximately 80% of the expected outcome. Due to Cross-Origin Resource Sharing (CORS) restrictions, I have hard ...

javascripthtmljquerycssjson