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

When attempting to view the PDF file, it appears completely void

After spending countless hours on this task, I'm still not making any progress. My goal is to download a PDF file from my server while currently running the operation on localhost. However, whenever I open the downloaded PDF, all I see is a blank whit ...

Adding a new element with Jquery when a dropdown option is selected

What is causing this issue to not function properly? <script> $(document).ready(function(){ $('#custom_field option').click(function(){ $('#custom_field_input').append('<tr><td></td> ...

Could the comments within a NodeJS script be causing memory problems?

I specialize in creating NodeJS libraries, and my coding practice includes adding JSDoc comments for documentation purposes. Here is an example of how my code usually looks: /** * Sum * Calculates the sum of two numbers. * * @name Sum * @function * ...

utilize javascript variables within an HTML document

I keep encountering a strange error (Express 400 Error: Bad Request) Some lines are translated to the variable value, while others just output an error. This is an example of my code: exports.add_comment = function(req, res){ var id = req.params.id; ...

Revolutionizing Form Select Field: Introducing Rails' Dynamic Input Rendering

I'm a beginner in coding, so please bear with me if my question sounds amateurish. Currently, I am developing an e-commerce website where customers can order posters from images uploaded to the site. They should be able to choose the size of the poste ...

When trying to run the "npm start" command, I encountered a syntax error that specifically mentioned the use of

Every time I attempt to run the npm start command, I encounter the following error: I have followed the steps provided in this link: https://github.com/kriasoft/react-starter-kit/blob/master/docs/getting-started.md Could you please advise on how to resolve ...

What is the best way to create JavaScript code specifically for devices with a maximum width of 520px?

Is there a way to apply this JavaScript code specifically to devices with a maximum width of 520px? I could use some guidance on how to achieve this. // Apply code for max-width = 520px const myBtn = document.getElementById("darktheme"); const ...

Adding a horizontal reference line to a bar chart in ChartJS or react-chartjs-2

Currently, I am in the process of creating a barchart using ChartJS and react-chartjs-2. The barchart is functioning properly but has nothing particularly noteworthy: https://i.stack.imgur.com/joi2W.png My goal is to incorporate a horizontal line that wi ...

Encountering issues when making API calls from a .NET program

I'm encountering an error when trying to call an API from a .NET application: "Script7002:XMLhttpREQUEST:Network Error 0x80070005, Access Denied." Interestingly, I am able to get the correct response when testing the API with the "Advanced Rest Cl ...

Having trouble with jQuery.cookie saving my JSON data

Being new to jQuery and JSON, I find this situation quite frustrating as it seems pretty straightforward but still doesn't work for me. My ASP.NET MVC website is using AJAX (via jQuery) to load data. Everything works fine until this point. I'm ...

Share user group Node Express with relevant data

I am looking for a way to create and send a customized navigation object to be rendered in an Express application based on user groups. My current approach involves adding middleware to each route: var navMiddleware = function() { return function(req, ...

Sorting function not working on dynamic Angular table

I'm currently facing a challenge with sorting a dynamic Angular table. If I manually code the table headers, everything works smoothly. Fiddle: https://jsfiddle.net/xgL15jnf/ <thead> <tr> <td> <a href="#" ...

Checking for valid zip code using a regular expression in JavaScript

Thank you for the suggestions, everyone. I have made some modifications to the script based on your advice and it appears to be functioning correctly now. <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script> $ ...

How can I rectify the incorrect return value of the base64 src value for an Img object in a Next.js API?

I am currently working on the backend of a project that does not have a frontend, and I am facing challenges with base64 encoding for images! In my Next.js app, I have an array containing images from the public folder stored in a separate file. I have two ...

Creating a JQuery slider that efficiently loads and displays groups of elements consecutively

Currently, I am in the process of developing an infinite horizontal tab slider using jQuery. My main objective is to optimize loading time by having the slider display only the first 10 slides upon initial page load. Subsequent slides will be loaded as the ...

Swap out the string variable when it is modified

To generate a string inside the "code" variable that combines the selected image values, the final code should appear similar to: "test1/A=1a/B=1b" or "test2/A=1b/B=1a", etc. If the user modifies icon "A," it should replace the value in the code instead of ...

What is the best way to deliver hefty files to users? Utilize the node-telegram-bot-api

bot.sendDocument(id, 'test.zip'); I am facing an issue while trying to send a 1.5GB file using the code above. Instead of being delivered to the user, I receive the following error message: (Unhandled rejection Error: ETELEGRAM: 413 Request En ...

How can I dynamically generate multiple Reactive Forms from an array of names using ngFor in Angular?

I am in the process of developing an ID lookup form using Angular. My goal is to generate multiple formGroups within the same HTML file based on an array of values I have, all while keeping my code DRY (Don't Repeat Yourself). Each formGroup will be l ...

Text will split into two at a later time

I am using the material-ui library. Curious about adding a text followed by a line divider. Here's how I attempted it: <Grid> <Typography variant="h6" color="primary"> {'text'} </Typograph ...

Conceal a div until reaching the end of the webpage by scrolling

Currently, I am working on a web page inspired by music release pages (check out an example here). My goal is to have certain hidden divs at the bottom of the page only reveal themselves once the user has scrolled all the way down, with a delay of a few se ...