在NextJS项目中添加页面

Question

希望大家度过愉快的一天！

我想问一些事情，我使用

npx create-next-app@latest

使用 typescript 和 tailwind 作为 css 创建新项目，如下所示：

然后我得到了这样的堆栈文件夹树：

然后问题是，我很困惑，以前使用 nextJS 的项目文件树不是这样的，现在我不再有名为

Pages

的文件夹，这是新事物吗？

然后我意识到我无法创建新页面（例如：我想创建

test page

，之前我只是在

test

文件夹中创建名为

pages

的文件夹并创建

index.tsx

文件）

如何使用此方案创建新页面？

Answer 1

在应用程序内，您可以创建其他文件名的文件夹。 文件夹名称将作为 url 的一部分，文件名单词将作为结束部分或 url。

structure : App>testcomponent>component1>index.js
url : ../testcomponent/component1/index.js

文件夹名称中可以有多层嵌套来创建嵌套路由。

对于动态路线

structure : App>testcomponent>component1>[id].js
url : ../testcomponent/component1/index.js

您需要在 URL 末尾传递 ID 号才能根据要求打开该特定文件。

同样适用于文件夹。

这里 id 只是示例。

Answer 2

考虑您想要将 About 页面添加到项目中。因此，首先在应用程序目录中添加一个名为

about

的新目录：

/your-next-js-project/app/about

然后你必须在目录中创建一个名为

tsx

的

page

文件：

/your-next-js-project/app/about/page.tsx

about

内容可能是这样的：

export default function About() {
  return (
    <main className="flex min-h-screen flex-col items-center p-24">
      Let's Get Started ...
    </main>
  );
}