What sets index.js apart from page.js in next.js?

  1. https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts

While reading through the next.js documentation, I came across an interesting point.

  • The documentation mentions that index.js serves as the root of the directory. This means that if I type /blog in the URL, it will lead me to the pages/blog/index.js file.

However, I have a dilemma with a file called pages/blog/subcomponent.js. I do not want users to be able to access /blog/subcomponent because it is meant to be a subcomponent. How can I prevent this?

  1. https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

Another article from next.js suggests using page.js instead of index.js, making only page.js publicly accessible.

  • Does this imply that files other than page.js are inaccessible? I'm feeling quite confused about this. Any clarification would be greatly appreciated.
javascriptnext.js

Answer №1

Nextjs offers two main types of routing:

  1. Pages router
  2. App router

Pages router (The primary method)

The Pages router in Nextjs requires the use of index.tsx if your page component is within a folder in the pages directory. Alternatively, if you choose not to use a folder structure, you can simply create a file with the page name directly in the pages directory. For example:

pages/blog.js → /blog (without a folder)

pages/blog/index.js → /blog (within a folder)

App router (The secondary option)

The App router in Nextjs mandates the use of pages.tsx if your page component is within a folder in the app directory. Likewise, if you opt not to utilize folders, you can just create a file with the page name in your app directory. For instance:

app/blog.js → /blog (without a folder)

app/blog/pages.js → /blog (within a folder)

It's important to note that other files within the same folder won't be accessible if either pages.tsx or index.tsx exists in that folder. It's recommended to only place the main page component in these directories, rather than additional components.

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

Retrieve the information transmitted to an EJS file within a separately included JavaScript file

I'm currently utilizing express js to render a file by using: res.render('plain',{state:'admin'}) The file plain.ejs includes main.js: <script src ="/main.js"></script> I need assistance on how to access the state v ...

javascriptnode.jsexpressejs

Create automatic transcripts for videos, including subtitles and captions

Are there any tools or plugins available that can automatically create a transcript of a video for website playback? For example, generating captions and subtitles in the English language. ...

javascripthtmltranscription

Is it possible to use JQuery ScrollTop while in the midst of an animation?

I am facing an issue with resizing containers and scrolling to elements. I have 2 containers that change width dynamically, each containing clickable elements. When a container is clicked, it animates the resize. However, when a clickable element is clicke ...

javascriptjqueryhtml

Leveraging JavaScript functions for invoking Ajax requests, accompanied by ASP.NET controls

Having a background in PHP, I am accustomed to using a PHP file to handle all of my ajax calls. Recently, I have been introduced to ASP.NET controls and the overall environment. I am curious about the correct method for handling ajax requests when they n ...

javascriptasp.netajaxwebforms

Is there a way to add a <video> tag in tinymce editor without it being switched to an <img /> tag?

I am attempting to include a <video> tag within the tinymce editor, but it keeps changing it to an <img> tag. Is there a way to prevent this conversion and keep the <video> tag intact? I want to enable videos to play inside tinymce whil ...

javascripthtmltinymce-4

Automatically compile files while performing an npm install or update

I am looking for a way to automatically compile my TypeScript code into JavaScript when another project requires it. For example, when a project runs npm install or updates with my project as a dependency, I want a specific command to be executed after all ...

javascriptnode.jstypescriptnpmconfiguration

What is the best way to handle waiting for a JavaScript __doPostBack call in Selenium and WebDriver?

I am encountering a unique issue while automating with Selenium/Python and trying to input data into two fields on a website. The script fills out the first field, ORIGIN CITY, without any problems. I have used WebDriverWait for the second field, DELIVERY ...

javascriptpythonseleniumasp.net-ajaxdopostback

Exploring the power of NodeJS modules through exports referencing

Encountering difficulties referencing dynamic variables related to mongoose models based on user session location value. Two scripts are involved in this process. The first script is called location.js & reporting.js In the location.js script: module.ex ...

javascriptnode.jssessionexpress

RAZOR - Strip image elements from variable with HTML content

In the code snippet below, I am using a helper to display content: @Html.Raw(Model.PageData.PageContent) My goal is to filter out any image tags that may be present. I have explored methods like .substring(), but they require specific indices or string n ...

javascripthtmlcssasp.net-mvcrazor

I am facing difficulties in adding dynamic content to my JSON file

I've encountered a challenge in appending new dynamic data to a JSON file. In my project, I receive the projectName from an input form on the /new page. My API utilizes node.js's fs module to generate a new JSON file, where I can subsequently add ...

javascriptnode.jsreactjsjsonnext.js

Link up each query with every php echo

Suppose I have the following PHP code: $logger = $_SESSION['logger']; $postquery = $con->query("SELECT * FROM posts ORDER BY id DESC LIMIT 5"); while($row = $postquery->fetch_object()){ $posts[] = $row; } And then, this section of ...

javascriptphpjquerymysqlajax

Display chosen preferences in an Angularjs dropdown alongside additional options

I'm currently developing a blogging software and have implemented an AngularJS dropdown for selecting post terms. Here's the code: <select multiple="multiple" name="terms" ng-model="post.data.attributes.term_ids" required> ...

javascriptangularjs

Managing user sessions in Node.js

What is the best way to manage SESSIONS in Node.js? Specifically, I am interested in storing a UserID in a session using Node.js. How can this be accomplished, and is it possible to access that Node.js session in PHP as well? I am looking for an equivale ...

javascriptphpnode.jssession

What is the best way to arrange elements based on the numeric value of a data attribute?

Is there a way to arrange elements with the attribute data-percentage in ascending order, with the lowest value first, using JavaScript or jQuery? HTML: <div class="testWrapper"> <div class="test" data-percentage="30&qu ...

javascripthtmljquery

What could be causing issues with my application when using server-side rendered styled-components with Next.js?

I am in need of assistance with an error I've encountered. Every time I try to access the homepage of my Next.js app, it breaks and displays a cannot read data map of undefined error. The browser consistently directs me to the _document.js file, but I ...

javascriptreactjsnext.jsstyled-components

Trouble with VSCode autoimport feature arises post incorporating absolute imports in NextJS

My auto import feature in VSCode (using control + space) stopped working after creating a jsconfig.json file in my NextJS project. Here is the content of my json file: { "compilerOptions": { "baseUrl": "." }, " ...

reactjsvisual-studio-codenext.jsauto-import

update certain parts of a webpage using ajax and still allow users to

Currently, I am implementing a partial update feature on the page using Ajax for a shopping cart. The cart updates in real-time as users add items to it. However, there is an issue when users navigate to the checkout page and then click the back button - t ...

javascriptajaxback

Issue with Webpack - npm run start and build operation not functioning?

Although I typically use create-react-app for my React projects, I decided to create one without it. However, I am encountering issues with the webpack configuration as I am not very familiar with it: This is how my package.json file looks like: { " ...

javascriptreactjsnpmwebpack

How to clear a particular select option in react-bootstrap

I am looking for a solution to clear the second select when the first one selects option B. The clearing should involve removing the value, disabling it, and setting the default option to Select.... import React, { useState } from "react"; import ...

javascriptreactjsformsreact-bootstrap

Steps for modifying a cell within a table using a button click

Hello, I am currently working on a project where I want to display a specific div portion when a user clicks on an image icon within a table. However, I am encountering an issue with the JavaScript code as it only shows the div portion in the first row and ...

javascripthtml