Next.js中index.js与page.js的区别及组件访问控制问题

一、Pages Router中避免子组件被公开访问 #

在Pages Router（使用index.js作为页面入口的路由系统）中，pages目录下的.js/.jsx/.tsx文件默认会被自动映射为可访问的路由。如果你不想让pages/blog/subcomponent.js通过/blog/subcomponent被访问，有两种简单可行的方法：

• 将组件文件移出pages目录：在项目根目录新建components文件夹，把subcomponent.js放到这个文件夹里，然后在pages/blog/index.js中导入使用即可，Next.js不会将components目录下的文件生成路由。
• 在pages目录内给组件文件加下划线前缀：比如重命名为pages/blog/_subcomponent.js，Next.js会自动忽略以下划线开头的文件，不会生成对应的路由地址。

二、App Router中非page.js文件的访问权限 #

在App Router（使用page.js作为页面入口的路由系统）中，只有特定命名的文件会被映射为可访问的路由，其中page.js是页面路由的入口文件，其他非特殊命名的文件（比如你的子组件文件）无论放在app目录的哪个位置，都不会被公开访问。也就是说，用户无法通过URL访问到非page.js（以及非route.js这类API路由文件）的组件或工具文件，你可以放心在app目录下存放子组件，只要不命名为page.js就不会生成可访问的路由。

内容的提问来源于stack exchange，提问作者Sanket hn