How to automatically redirect empty routes to a specific route in Next.js

When visiting a non-existent endpoint in Next.js, I receive a 404 error. What I actually want is for all unused routes to automatically redirect to a default route; specifically, the landing page.

I've spent more than an hour trying to figure this out and I don't think it should be such a complex task. It seems like it should be straightforward.

So, I've decided to seek some help on this.

Thank you!

Answer №1

One way to handle 404 errors is by creating a custom page that redirects.

//src/pages/404.js
    
import React, { useEffect } from 'react'
import Router from 'next/router'


export default function Custom404() {

  useEffect(() => {
    Router.push('/')
  },[])

  return null
}

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

AngularJS: Controller causing an unchecked error

I'm a beginner to AngularJS and I'm struggling to understand why I'm not getting a response when clicking the button. Any help would be greatly appreciated. I've reviewed other examples of controllers being used but I can't seem to ...

Is it possible to utilize window.location.replace function within an iframe?

Is it possible to use window.location.replace to bypass history and target on-page anchors without page reloads, but encounter issues when working within iframes? The main problem seems to be a CSP (content security policy) violation for script-src ' ...

Retrieving user email with Vue.js from Firebase

Currently, I am in the process of developing a chat application using Vue.js and Firebase. This project has been quite challenging for me as I am new to both Vue and Firebase. One specific issue I have encountered is trying to retrieve the user's ema ...

Getting the current URL in InApp browser on Phonegap 3.0: A quick guide

Hey there, I am having trouble retrieving the current URL of an in-app browser when clicking the close button or at any time after loading a URL. Here's my code: var ref = window.open('http://google.com', '_blank', 'hidden=y ...

Replacing the yellow autofill background

After much effort, I have finally discovered the ultimate method to remove autofill styling across all browsers: $('input').each(function() { var $this = $(this); $this.after($this.clone()).remove(); }); However, executing t ...

Issue with jsPDF: PNG file is either incomplete or corrupted

I'm encountering an issue while attempting to pass Image data to the addImage function. I have tried downgrading the versions of jspdf and html2canvas, as well as experimenting with different ways to import the two libraries, but the problem still per ...

Is it possible to alter the page color using radio buttons and Vue.js?

How can I implement a feature to allow users to change the page color using radio buttons in Vue.js? This is what I have so far: JavaScript var theme = new Vue({ el: '#theme', data: { picked: '' } }) HTML <div ...

Route is searching for static files in the incorrect directory

There seems to be a specific route, /admins/:id, that is looking for static files in /public/admins/ instead of /public/. This issue is causing 404 errors and preventing the js and css files from loading on this page. All other routes are correctly fetchin ...

In the game of rock paper scissors, the icons become unclickable once you achieve a score of 5

I have created a Rock Paper Scissors game where the score resets if either the user or computer reaches 5 points, but I want to prevent any further play after hitting 5. Currently, the game displays a message and reloads after 5 seconds, during which tim ...

`Apply event bindings for onchange and other actions to multiple elements loaded via ajax within a specific div`

My form includes various input fields, dropdowns, and text areas. Upon loading, jQuery locates each element, sets its data attribute to a default value, attaches an onchange event, and triggers the change event. The issue arises when some dropdowns are d ...

Tips for managing setTimeout() on a collection of elements

I have been attempting to utilize GPT for some time now but unfortunately, I haven't achieved satisfactory results. The Concept: I have implemented a snack bar feature to showcase errors. It takes an error message as input and stores it in a list. Th ...

Unable to iterate over an array within a single file Vue component

I created a vue.js app utilizing single file components. In the data section, I initialized an empty array like this: data: function () { return { teamKeys: [] } }, Next, I populate this array by pushing values into it within one of my methods: ...

Is there a way to identify the index of user input when using the .map method?

I'm currently utilizing the Array.prototype.map() method to present an array within a table. Each row in this table includes both an input field and a submit button that corresponds to each element from the Array.prototype.map() function. Is there a w ...

Leveraging the power of a JavaScript framework within the script tag

Hello there! I'm just starting out with vue.js and exploring different JavaScript frameworks. Recently, I came across an interesting example based on the documentation. import modal from 'vue-semantic-modal' export default { components ...

The operation of moveImage does not exist

Currently, I am attempting to incorporate setInterval with my moveImage function in order to modify the position of an image. Here is a snippet of my code: <template> <div class="randImg"> <img v-bind:style="{top: imgTop + 'px&ap ...

Is it beneficial to create a separate component for React form elements?

I've come across advice that suggests when unsure, turning an element into a component is a good idea. But what are the actual benefits of converting form elements like <input /> into components? Let's consider the following example: cons ...

Develop React routes on the fly

Currently, I am working on a React App that requires the creation of Routes dynamically based on data models sent by the backend in JSON format. For example: { "Route1": [ { "id": 1, "visible": true, "other_data": "..." } ], "Route3": [ { "i ...

A fresh PHP page escapes from the confines of an iframe and expands to occupy the entire

When calling a new url from inside an iframe, the goal is for the new url to break free from the confines of the iframe and appear full screen. The challenge lies in not having control over the call to the new php file, as it is initiated by a credit card ...

What is the process for exporting a class and declaring middleware in TypeScript?

After creating the user class where only the get method is defined, I encountered an issue when using it in middleware. There were no errors during the call to the class, but upon running the code, a "server not found" message appeared. Surprisingly, delet ...

ES6 destructuring in a loop

I attempted to extract the father's name from an array of objects and populate a new array with these names. Here is an example: var people = [ { name: "Mike Smith", family: { father: "Harry Smith", } }, { name: "Tom Jones ...