Utilizing Next.js for dynamic routing with [[...slug.js]] allows for comprehensive URL handling and seamless 404 page display for links leading back to the homepage - a feature

In order to achieve a single dynamic route for handling all requests in this application, I have created a file called [[...slug]].js. Data loading is managed using getServerSideProps(), allowing for server-side rendering. Notably, there are no index.js files present.

While everything functions properly when running locally in development mode, issues arise upon deployment to Vercel. The problem lies in links pointing to /; specifically, using 

<Link href={"/"}>
results in a request for an index.json file from the server, triggering a 404 response and displaying an error page. The reason behind this behavior remains unclear.

javascriptnext.jsnext-link

Answer №1

Ah, I figured it out!

My approach involves utilizing getServerSideProps() to retrieve data based on the slug provided. The content originates from Sanity.io and is queried to determine if the slug property matches either the URL's slug or a default page slug.

During local development using next dev, I encountered an issue where the params.slug argument was showing up as undefined when loading the root ("/") URL. This remained consistent whether accessing the URL through a refresh or navigation action (like clicking a link or using the back button).

However, things took a twist once the site was deployed. While the initial load still returned undefined for params.slug, any subsequent client-side navigation led to the slug mysteriously changing to index. As I had not accounted for a page with a slug of index in my setup, this unexpected behavior resulted in 404 errors. The solution? Including "index" as one of the triggers for the default slug resolved the issue.

Whether this is a quirk in Next JS or simply a gotcha that caught me off guard remains uncertain, but it certainly kept me scratching my head for some time.

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

Passing a list variable to JavaScript from Django: A step-by-step guide

Currently, I am facing an issue while attempting to generate a chart using Chartjs and Django. The problem arises when transferring data from views.py to the JavaScript code. Here is a snippet of my code in views.py: def home(request): labels = [&quo ...

javascriptpythondjangochart.js

The "next" button on my carousel is unresponsive and the automatic transitioning feature is not working

I'm having trouble implementing a carousel on my website. The next/previous buttons and automatic slides are not functioning properly. <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <!- ...

javascriptcarousel

Creating rows within a table in React.js using the map method: Techniques to follow

Here is my code snippet: const [tasks, setTasks] = useState(''); I am simulating data with a mock server. function fetchTasks() { axios.get('http://localhost:4000/tasks') .then(function (response) { ...

javascriptarraysreactjsaxios

Displaying Props Information in a Modal Window using React

Currently venturing into the realm of React JS, where I am in the process of developing a sample eCommerce application for real-time use. However, I have hit a roadblock. In my Products List, there is a Buy button for each product. When clicking on this b ...

javascriptreactjsecmascript-6material-ui

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

I am attempting to create an 8 x 8 grid. It's coming together, but the issue is that the first line only starts with one # sign. function print(msg) { console.log(msg); return msg; } let result = ""; for(let i=1; i<=8; i++) { result += ...

javascripthtmlcss

The package.json file engines field specifying the version with a tilde and then a greater than sign (~>)

When a package.json file includes an engines field such as this: "engines" : { "node" : "~>12" }, What is the significance of ~> in this context? ...

javascriptnode.jsnpm

Retrieve the rowid from the first column of a jqGrid row

I want the first column of my jqGrid to display the rowid number number | name | class 1 | A | acceptable 2 | B | good 3 | C | bad Alternatively, I would like to add a column like this (image) https://docs.google.com/file/d/0Bxi6bFcYZ_MgYTI1dUJCMWEtd0E/ ...

javascriptjqueryjsonjqgrid

Managing two variables in C# Controller and View

I am facing an issue with the two variables in my controller class. The first variable, currentUserId, is supposed to store the user currently logged into the website. The second variable, currentRoomId, should track the chat room the user is in. The probl ...

c#javascriptjqueryajaxasp.net-mvc

Hovering over triggers tooltip flickering with Mouseover/Mouseenter interaction

When the mouseover event is triggered on the parent element, there seems to be a flickering issue when moving into the tooltip (child) element. The console log indicates that the mouseover/mouseenter event is being fired rapidly. The tooltip does not stay ...

javascriptangularjstwitter-bootstrap

Updating ng-table within an Angular controller

Having encountered an unusual issue with ng-table. Here is a snippet of code from my controller: this.category = "Open"; this.category = ["Open", "Accepted", "Rejected"]; this.dataItems = []; var _this = this; this.$scope.$watch("vm.category", function( ...

javascriptangularjsngtable

Having trouble with ng-click in my AngularJS Restful application

I was attempting to create CRUD operations in AngularJS. Unfortunately, I am facing an issue where my ng-click is not functioning properly. Below is the code for my list.html: <div class="container"> <input type="text" ng-controlle ...

javascriptangularjsangularjs-directive

Incorporate an object property value into an established Angular/Node app by using the syntax " :12 " instead of just " 12 "

My current project is an Angular/Node MEAN stack application, but my primary concern revolves around JavaScript. When I receive a response object, it includes an SQL identity id console.log(response.recordset[0]); The output is "":12 I want to assign t ...

javascriptangularjsnode.jsajaxjavascript-objects

Troubleshooting Angular 2 ng-if issues

Is there a way to dynamically apply CSS styles to an element that has an ng-if condition, even if the condition fails? It currently works fine when the condition is true, but I'm looking for a solution that allows me to modify the element regardless o ...

javascripthtmlcssangularjs

Error: Module not found - Issue with importing SVG files in NextJS

Currently, I am utilizing the babel plugin inline-react-svg to import inline SVGs in NextJS. Here is a snippet from my .babelrc configuration file: { "presets": ["next/babel"], "plugins": [ "inline-react-svg" ...

reactjstypescriptfrontendnext.jsbabeljs

Using Strapi to showcase images in a React frontend

I am currently in the process of developing a website utilizing Strapi as a Content Management System (CMS) and Next.js with React for the Frontend. The website features an image slider that includes an image, a headline, and a description. While I have su ...

javascriptreactjsnext.jscontent-management-systemstrapi

What is the best method for converting a variable with HTML content into a printable string?

In an attempt to display user-entered data from a text box to an HTML div, there seems to be an issue when the data contains HTML content. Instead of displaying the content as a string, it shows it as HTML elements. For example: let text = "<h1>Worl ...

javascripthtmlstring

What causes req.sessions to show an empty object instead of the expected value?

I've been grappling with a small issue while learning express.js. I am struggling to save sessions in the browser so that users don't have to log in every time they visit. I am using cookie-session for this purpose. When I send the login data fro ...

javascriptnode.jsexpresssession-cookies

Encountered an error with Winston and Elasticsearch integration: "TypeError: Elasticsearch is not a constructor

I recently implemented winston-elasticsearch on my express server by following the code provided in the documentation var winston = require('winston'); var Elasticsearch = require('winston-elasticsearch'); var esTransportOpts = { le ...

javascriptexpresselasticsearchloggingwinston

Ways to divide a buffer in JavaScript

String was created by utilizing the toString method on the buffer. Here is a sample of the resulting string: GET / HTTP/1.1 Host: localhost:8080 Connection: keep-alive Cache-Control: max-age=0 .... Is there a way to parse this string whenever a space (" ...

javascriptstring

Best Practices for Converting TypeScript to JavaScript

What is the recommended approach to converting this JavaScript code into TypeScript? JAVASCRIPT: function MyClass() { var self = this, var1 = "abc", var2 = "xyz"; // Public self.method1 = function () { return "somethin ...

javascripttypescriptscope