Logo
RavenSaaS Docs

创建新页面

创建流程

在 RavenSaaS 中创建新页面,跟 NextJS 框架创建新页面的规则一致。NextJS 页面与布局

1. 在 app/[locale]/(default) 目录下创建一个新的文件夹,新建一个 page.tsx 文件,并添加新页面的内容:

app/[locale]/(default)/new-page/page.tsx
1export default function NewPage() {
2  return (
3    <div className="min-h-screen bg-background">
4      <div className="container mx-auto px-4 py-16 md:py-24">
5        <div className="text-center max-w-3xl mx-auto">
6          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground mb-4">
7            NEW PAGE
8          </h1>
9          <p className="text-xl text-muted-foreground mb-8">
10            This is an example of a new page, you can customize the content as needed.
11          </p>
12        </div>
13      </div>
14    </div>
15  );
16}
new-page

2. 在浏览器访问新页面的地址,即可看到新页面渲染后的内容:

new-page-preview

新页面会复用在 app/[locale]/(default)/layout.tsx 文件中定义的布局,默认显示 Header 和 Footer。

如果你希望新页面有不一样的布局,需要创建新的 Layout 文件。具体步骤参考 NextJS Layout 文档 NextJS 页面与布局

参考

NextJS 页面与布局

NextJS 页面与布局文档

查看文档

Last updated on 2025年1月5日