Having trouble getting the NextJS custom 404 page to display?

I've located the 404.tsx file in the apps/specificapp/pages/ directory, yet NextJS continues to show the default pre-generated 404 page.

Could there be a misunderstanding on my part regarding the documentation, or is there some obstacle preventing me from customizing the default 404 page?

Answer №1

After some investigation, I discovered that the next.config.js file was set up to only allow certain file extensions like page.tsx, page.ts, page.jsx, and page.js. To resolve the issue, I renamed my file to 404.page.tsx and now everything is functioning perfectly.

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

Issue with PassportJS and Express 4 failing to properly store cookies/session data

I have a situation with my Express 4 app using Passport 0.3.2. I've set up a passport-local strategy, and it's successfully retrieving the user information when the /session endpoint is provided with a username and password. The issue arises whe ...

Arrays passed as query parameters to Next.js router.query may result in the value being

When trying to pass objects from an array to another page using router.query, individual objects like router.query.title work as expected. However, when attempting to pass arrays such as router.query.reviews, it returns something like reviews: ['&apos ...

What is the best way to swap out the if else statement with a Ternary operator within a JavaScript function?

Is there a way to replace the if else statement in the function using a Ternary operator in JavaScript? private getProductName(productType: string): string { let productName = 'Product not found'; this.deal.packages.find(p => p.isSele ...

Encountered an error while attempting to deploy Next.js on AWS Amplify. The deployment was unsuccessful as

I encountered an issue while attempting to deploy my Next.js app on AWS Amplify. The deployment failed with the error message "Build failed. Error: Command failed with exit code 1". Below are the logs from the deployment process: ...

Establish a table containing rows derived from an object

I am currently dealing with a challenge in creating a table that contains an array of nested objects. The array I have follows this schema: array = [ { id: 'Column1', rows: { row1: 'A', row2 ...

When executing the release command in Ionic 3, the Angular AoT build encountered a failure

Struggling to get my Sony Z2 smartphone app running. Command used: ionic build android --prod --release Error displayed in console: typescript error Type CirckelmovementPage in C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/cir ...

What is the best way to display a Lit Element Web component within a Typescript Express application?

After creating a Typescript Express Server, I have the following files: src/server.ts import express from "express"; import { HomeController } from "./controllers"; const app: express.Application = express(); const port: number = ((proc ...

There seems to be a contradiction in my code - I am returning a Promise but TypeScript is throwing an error saying that the

I currently have a function that retrieves a bot's inventory on the Frontend fetchBotInventory() { this.socket.emit('fetch bot inv'); this.socket.on('bot inv', (botInventory) => { return new Promise((resolve, re ...

Error encountered when attempting to integrate FontAwesome into the body of a Next.js Link

I'm currently using the react-fontawesome library in my project built with Next.js. However, I've encountered an issue when trying to include an icon inside the Link component. The error message is confusing and I can't seem to figure out wh ...

Having trouble disabling or removing dark mode in Create Next App

Normally, when I used create-next-app, I would have a pleasant light-themed 'Welcome to Next.js' application set up for me. However, today when I created a next.js app with create-next-app, the application automatically switched to dark mode base ...

PlayWright - Extracting the text from the <dd> element within a <div> container

Here is the structure I am working with: <div class="aClassName"> <dl> <dt>Employee Name</dt> <dd data-testid="employee1">Sam</dd> </dl> </div> I am attempting to retrie ...

`How can I sort information based on a chosen parameter?`

Is it possible to combine the two conditions into one within the function onSelectedReport()? Representing these conditions in HTML would result in: HTML: <div *ngFor="let report of reports"> <div *ngFor="let i of income"> <di ...

Maintaining search filters across pages in Angular 2 using URL parameters

I am attempting to store certain filters in the URL for my application, so that they can be reapplied when the page is reloaded. I am encountering challenges with Dates (using moment), nullable properties, and special characters (/). When I pass values to ...

What is the best method for sending a user to a different page when a webhook is triggered by an external API in

In my project using NextJS and the pages router, I encounter a scenario where a user initiates a process through a form that takes approximately 30 seconds to complete. This process is carried out by an external API over which I have no control. Once the p ...

Encountered an issue with an invalid src prop ('link') on the `next/image` component. The hostname "localhost" has not been properly configured under images in your `next.config.js` file

I'm having an issue with the Image component in Next.js. I've provided the source URL like this: {`${API}/user/photo/${blog.postedBy.username}`} However, it's giving me an error. I even made changes to my next.config.js: module.exports = { ...

Transforming API response data into a Typescript object using React mapping

When I make an API call, the response data is structured like this: [ { "code": "AF", "name": "Afghanistan" }, { "code": "AX", "name": "Aland Islands" } ...

The default credentials required by App Engine to connect to Firestore in Google Cloud could not be located

My NextJS Typescript app is currently running on Google App Engine, fetching data from Firestore successfully. To enhance the speed of the application, I am experimenting with a new data fetching approach where the server listens to Firestore collections a ...

Exploring the process of retrieving data from localStorage in Next.js 13

Having recently delved into the realm of Next JS, I've encountered a hurdle when it comes to creating middleware within Next. My aim is to retrieve data from local storage, but I keep hitting roadblocks. middleware.ts import { key, timeEncryptKey, to ...

Exploring the intricacies of extracting nested JSON data in TypeScript

Can someone help me with this issue? https://example.com/2KFsR.png When I try to access addons, I only see [] but the web console indicates that addons are present. This is my JSON structure: https://example.com/5NGeD.png I attempted to use this code: ...

The canActivate: [AuthGuard] feature on the external router is not functioning as expected

I'm encountering an issue with my routing. I attempted to use the following code: const routes: Routes = [ { path: 'home', component: HomeComponent, canActivate: [AuthGuard], children: [ { path: 'events', component: Ev ...