Nested routing in Nextjs is encountering issues when implemented with a specific file

I'm struggling with setting up routes in Next.js. When I create the path "/app/[locale]/admin/page.tsx," I can access http://url/admin/ without any issues.

However, when I try to set up "/app/[locale]/admin/login.tsx," I encounter an error and cannot access http://url/admin/login.

The only way I can access http://url/admin/login is if I create "/app/[locale]/admin/login/page.tsx," but I prefer not to clutter my project with multiple directories.

Is there a solution you can suggest to help me resolve this issue?

The code for /app/[locale]/admin/login.tsx:

import '../globals.scss'
import React from "react";

export default function Login() {

    return (
        <>
            Code
        </>
    );
}

Answer №1

If you encounter a syntax issue, it may be because the files need to adhere to a standard that Next.js recognizes. In your situation, naming the file after the function it represents could cause confusion as Next.js does not interpret routing in that manner. Next.js looks for "page.tsx or jsx" in the corresponding route based on folder organization.

For example, if you have /app/[locale]/admin/random.tsx, nothing will be displayed. Similarly, /app/[locale]/admin/login/random.tsx will not display anything either. However, if you have /app/[locale]/admin/login/page.tsx, it will show the component within the page specific to that route.

Remember, page.tsx should reflect the name of the folder it resides in. For instance, in the case of "/app/[locale]/admin/login.tsx," you would need to rename "login.tsx" to "page.tsx" for it to function correctly.

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

Counting the elements on a page using Selenium and Node.js: A step-by-step guide

I've been experimenting with Selenium in Javascript using NodeJS and I'm trying to tally up some elements based on CSS selectors. So far, I've attempted a few methods: client.findElements(By.css(".some-class")).size(); However, I encounte ...

What's the best way to implement image size and type validation, specifically for .jpg and .png files, using Multer?

When using multer to receive files from the FrontEnd, I need to validate the image size to ensure it's less than 1MB. Additionally, I want to restrict the accepted file types to .jpg, .jpeg, and .png only. const multer = require("multer"); c ...

How can you locate the position of identified text on a webpage to accurately place the mouse cursor there?

When browsing a webpage in my web browser (preferably Firefox), I have the ability to search for a specific text "abc" using ctrl+f. Once found, I need to move my mouse cursor to another relative position on the page and click. Unfortunately, the necessar ...

Cookie-powered JavaScript timer ceases after 60 seconds

I'm having an issue with my countdown timer where it stops counting after just one minute. It seems to pause at 54:00 when I set it for 55 minutes, and at 1:00 when I set it for 2 minutes. Any suggestions on how I can resolve this and make it continue ...

Ways to prevent a specific class from using CSS styling

My HTML <body> <div id="finalparent"> <!--many parent divs here--> <div id="1stparent"> <div id="txt_blog_editor" class="box" style="width: 1097px;"> <div class="abc anotherclass"> </div> & ...

What is the proper way to structure the DATETIME format when making an API request to mySQL?

Frontend code: import React, { Component, useState, useEffect } from "react"; import Navbar from "../Navbar/Navbar.js"; import BarChart from "../BarChart/BarChart"; ... Backend code: //set up express server const express = require("express"); const app ...

Is there a way to locate a parent class starting from a child class, and subsequently track down another child class from the parent?

I am facing a challenge with multiple tags structured like this: <div class="A"> <div class="B1">...</div> <div class="C1">Hello World!</div> <div class="C2">World Hell ...

Tips for preventing redundant function calls to a prop within a ReactJS component

I am currently facing an issue where I am repeatedly calling the same function within a component to retrieve a specific prop inside the render function. Is there a way to optimize this and avoid calling the function multiple times for each required prop ...

How can I transform a javascript object into a fresh array object?

Could you assist me with transforming JSON data? The initial structure is as follows: [ { "_id": "606f990042cc89060c54a632", "number": 1293, "date": "2021-04-08", "__v": 0 }, ...

Updating a boolean prop does not cause the child component to be refreshed

I am working with the following components: Parent: <template> <Child path="instance.json" v-bind:authenticated="authenticated" v-bind:authenticator="authenticator" /> </tem ...

I am struggling to make the while loop in JavaScript stop even when I command it to

var dataStatus = '1'; while (dataStatus != 0) { $.ajax({ url: '/ajax.php?updateData='+dataStatus, dataType: 'json', async: false, success: function(response) { dataStatus = respo ...

The data type of Subscription: prototype, NOT ASSIGNED

I am encountering the following error when attempting to return a subscription object. Error Message:-------- Type 'Subscription' does not have the prototype and EMPTY properties that are expected from type 'typeof Subscription' Here ...

What is the best method for serving cross-site content - JSONP, iframe, or a different approach?

In the process of developing an ad network, I am faced with the task of integrating third-party websites to include my JavaScript and replace specific divs with my content. Choosing which content to serve dynamically into these divs necessitates a cross-s ...

Having trouble with your Discord.js Bot continuously going offline and getting Value errors? Here’s how to resolve it

Why do I keep encountering this error? TypeError: Cannot read property 'size' of undefined at Client.client.on.message (/home/colter/Code/groundskeeper/index.js:38:30) at emitOne (events.js:116:13) at Client.emit (events.js:211:7) at MessageCre ...

JavaScript method to clear a variable

Can JavaScript prototype be used to add a method to a variable that is undefined? For instance, we can use the following code: var foo = "bar"; String.prototype.doTheFoo = function(){ console.log("foo is better than you"); }; foo.doTheFoo(); This c ...

Harness the power of the ioHook Node.js global native keyboard and mouse listener within your Browser environment

I'm dealing with a challenging issue that seems to have no solution due to security limitations. However, I'm reaching out to you as my last hope to find a workaround. For my project, I require a system that can monitor user mouse and keyboard a ...

Contrasts between the storage of data in a static function versus a static object

Trying to figure out the best way to reset a react class component back to its initial state, I came across two different implementations. In my own version, I created an object with initial values and set the component's state equal to it: // My imp ...

Import HTML document into a Bootstrap Popup

Currently, I am working on creating a modal that loads content dynamically. Below is the JavaScript code I have been using for this task: function track(id,title) { $('#listenTrack').modal('show'); $('#listenTrack').f ...

Obtain the content enclosed by HTML tags

Looking to extract text between html tags? Imagine having a list of cities in California, each within paragraph tags. Can you retrieve only the text inside the paragraph tags? <div class="cities"> <div><p>Los Angeles</p><h5 ...

Implementing a variety of threshold colors in Highcharts

Exploring this Highcharts fiddler: http://jsfiddle.net/YWVHx/97/ I'm attempting to create a similar chart but encountering some issues. The fiddler I'm currently working on is here: (check out the edit below!) The key difference in functionalit ...