Next.js 乍一看似乎令人生畏，因为有这么多新概念需要掌握。但别担心——在这个循序渐进的教程中，我将为您提供使用 Next.js 创建您的第一个现代全栈应用程序所需的所有基本信息。
在本教程中，我将带您了解 Next.js 的基础知识，并指导您创建您的第一个全栈应用程序。在本教程结束时，您将有信心开始使用 Next.js 构建您自己的全栈应用程序。
因此，让我们直接进入并一起释放 Next.js 的力量。
（NextJs教程：https://www.java567.com/search.html?sWord=next&v=2306015）
以下是我们将介绍的内容：
-
我们要建造什么？
-
入门
-
如何在 Next.js 中创建共享布局
-
如何在 Next.js 中创建自定义导航栏
-
如何在 Next.js 中创建 API 路由
-
如何建立主页
-
Next.js 中的 App Router 是什么？
-
如何增强 Next.js 代码库的模块化和可维护性
-
如何创建动态角色页面
-
如何在 Next.js 中创建动态 API 路由
-
如何在 Next.js 中创建动态 UI 路由
-
Next.js 中有什么
generateStaticParams？ -
dynamicParamsNext.js 生成静态页面的目的是什么？ -
如何生成静态页面
generateStaticParams -
如何建立测验部分
-
如何在 Next.js 中创建客户端组件
-
结论
好吧，让我们开始吧！
我们要建造什么？
在本教程中，我们将创建一个引人入胜的应用程序来展示有关恶搞之家角色的信息。此外，我们将包括一个测验部分，用户可以在其中测试他们对节目的了解。
为了让您简单熟悉，我们将避免使用数据库，而是使用本地 JSON 数据。通过消除数据库集成的复杂性，我们可以专注于掌握 Next.js 的基本概念。
申请预览
入门
要开始学习本教程，我强烈建议使用我专门为本教程创建的入门样板。它已经包括必要的依赖项和文件夹结构，从而节省了您宝贵的时间，无需从头开始设置您的项目。
只需从 GitHub 存储库中克隆入门样板，然后按照教程进行操作。这样，您就可以专注于学习和实施这些概念，而不会陷入设置细节中。
-
入门样板：在 GitHub 上查看
-
最终版本：在 GitHub 上查看
设置启动样板并在本地计算机上成功运行后，您应该能够看到初始页面。此页面标志着我们教程的开始，并将作为我们旅程的起点。
样板的初始页面
从这里开始，我们将逐步构建现有代码并在我们的应用程序中实现一些很酷的功能。让我们开始吧，马上开始吧！
如何在 Next.js 中创建共享布局
通常在您的应用程序中，您有跨多个页面共享的元素，例如导航栏或页脚。手动将这些元素添加到每个页面可能既乏味又容易出错。幸运的是，Next.js 提供了一种便捷的方式来创建可在整个应用程序中重复使用的共享布局。
第一种布局称为根布局。顾名思义，此布局在我们应用程序的所有页面之间共享。它作为最顶层的布局，为我们的整个应用程序提供了一致的结构。Root Layout 是必需的，我们需要确保它包含必要的 HTML 和 body 标签。
接下来，让我们考虑应用程序中的各个路由段。每个段都可以选择定义自己的布局。这些布局类似于根布局，将在该段内的所有页面之间共享。这允许您为应用程序的不同部分设置特定的布局，同时仍然在每个部分中保持一致的结构。
现在，打开app/layout.js并向其中添加以下代码：
// 标签：应用程序,js,全栈,API,Next,data,路由 From： https://www.cnblogs.com/web-666/p/17447922.html