Next.js全栈Web应用程序起始模板2024
嘿，大家😃，你们打算构建一个全栈 Web 应用吗？如果是的话，你们来对地方了！我很高兴向你们介绍一个 Next.js 全栈起始模板，我设计了这个模板来简化创建现代、功能丰富的 Web 应用的过程，并消除为启动项目设置所需的样板文件所花费的时间。
这个起始模板专为 Next.js 14 版本定制。无论您是经验丰富的开发人员还是刚刚入门，这个起始模板与 Next Js 的功能相结合，提供了一个直观的框架，简化了构建动态和交互式全栈 Web 应用程序的开发过程。
使用这个起始模板，您可以专注于重要的事情，更快地启动项目。 🚀
以下是需要翻译的内容 : '可以在下面找到初始模板GitHub存储库的链接:'
如何使用这个模板？ 🤔
使用这个 Next.js 全栈起始模板非常简单。只需转到上面链接的 GitHub 存储库，并按照 README 文件中概述的步骤操作。在那里，您将找到详细的设置说明以及启动项目所需的任何先决条件。
主要特点 🚀
在这一部分，让我们深入了解这个模板的特点。该模板的主要特点如下：
- 可扩展的项目结构 📈
- 启用 TypeScript ✅
- 预配置的 Ant-Design 组件库 🐜
- 使用 SASS 模块和全局变量进行结构化样式设计 💅
- 社交认证和路由守卫 🔐
- 带有数据库集成的示例 API 🗂️
- 自定义别名导入 📥
此模板使用的技术栈
拥有良好组织的项目结构对于代码库的可扩展性和可维护性非常重要。通过合理地组织项目文件夹和文件，开发人员可以轻松定位和修改特定组件、服务或其他文件。以下截图展示了模板的文件夹结构。在本节中，我们将看一下每个文件夹的目的。
文件夹结构
“根级别” 文件夹：
- 公共 — 用于存储任何公共资产，如图片和字体。
- 源 — 所有主要源文件和文件夹都被分组在 src 内。
“Src level” 文件夹：
- App — 包含页面路由和 API 路由。
- Components — 在此文件夹中使用原子设计模式来维护组件。
- Constants — 用于存储所有常用/共享常量。
- Layouts — 所有布局，包括主要布局，都放在此文件夹中。
- Models — 用于存储数据库模式模型。
- Providers — 所有提供者，如认证提供者和主题提供者，都放在此文件夹中。
- Services — 服务层维护在此文件夹中，其中包含一组函数来调用 API。
- Styles — 全局样式和样式变量放在此文件夹中。
- Types — TypeScript 类型放在此文件夹中。
- Utils — 实用函数或助手可以放在 utils 文件夹中。
在这个项目中启用了Typescript，以提供更好的开发者体验并保持类型安全。如果你愿意，也可以使用JavaScript，因为设置了“allowJs”标志为_true。如果不想允许使用JavaScript，可以将其设置为_false_。
全局类型在 src/types/global.d.ts 文件中定义.
src/types/global.d.ts
Ant Design（AntD）组件库已在此模板中设置和预配置。AntD充满时尚实用的组件，可用作您的Web应用程序的主要构建模块。它为您节省了从头开始设计每个元素的麻烦，并帮助您缩短开发时间。
AntdConfigProvider.tsx 处理 AntD 库的顶层配置。库的主色调配置为全局样式变量。要自定义主色调，您只需修改 $primary-color 变量的十六进制值，位于 src/styles/variables.module.sass. 中。
此模板使用SASS模块和全局变量进行结构化样式设置。SASS模块允许封装样式，通过将样式限定在各个组件中，更容易管理样式表。
全局变量简化了在项目中定义和重复使用常见样式的过程，促进了样式的一致性。使用SASS模块和全局变量，您可以保持样式的整洁和有组织性。
社交认证使用户能够使用其现有的社交媒体账户（如Google、Facebook或Twitter）登录到您的Web应用程序。为实现社交认证，此模板已集成了NextAuth.js认证库。
此模板预先配置了两个社交认证提供商，Google 和 Github，但您可以自由扩展以使用您喜欢的任何其他平台。要添加新的提供商，您只需在此处配置一个新的提供商，src/app/api/auth/[…nextauth"]/route.ts.
src/app/api/auth/[…nextauth]/route.ts
路由守卫: 路由守卫允许我们保护应用程序中的特定路由，确保只有经过身份验证的用户才能访问私有路由和端点。路由守卫是通过中间件方式实现的。通过拦截请求，中间件在允许访问之前验证用户的身份验证状态。您还可以扩展此中间件以执行基于角色的访问控制。
src/middleware.ts
该模板包含了一些示例API端点，涵盖了TODO列表的基本CRUD（创建、读取、更新、删除）操作。这些API作为如何在该项目中实现API端点的实际演示。
具有基本CRUD操作的示例TODO应用程序
每个 API 方法都放在自己的文件中，如下面的截图所示，以更好地分离逻辑。如果您喜欢，也可以将所有 API 方法放在一个文件中。
与MongoDb集成数据库： 使用mongoose库连接数据库并进行操作。数据库模型可以在src/models文件夹中找到. 您可以根据需要轻松扩展以添加自己的模型。
src/utils/database.ts
项目使用 tsconfig.json 文件配置自定义别名导入。这些别名可用作模块路径的快捷方式，让您轻松导入文件，避免繁琐的目录遍历（示例：“../../../example.ts”）。有了自定义别名，您的导入语句变得更清晰、更易读。这是一个小调整，在项目规模扩大时保持项目导入有序方面产生了重大影响。
别名导入示例
tsconfig.json 配置如下，compilerOptions 下的 paths 属性允许我们自定义别名.。如果决定向项目中添加新文件夹，可以在这里添加更多。
tsconfig.json
正如这篇博客中所解释的，我致力于消除样板设置的负担，帮助开发人员专注于真正重要的事情。我真诚地希望您会发现这个模板有用，并且能够在您的下一个项目中帮助到您！😊
如需进一步澄清或协助，请随时通过[email protected]联系我，或通过LinkedIn与我取得联系，https://www.linkedin.com/in/devon-wijesinghe。干杯！🤜🤛
Stackademic 🎓
感谢您读到最后。在您离开之前：