如何使用Next.js创建全栈应用程序
Posted 晓风晓浪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用Next.js创建全栈应用程序相关的知识，希望对你有一定的参考价值。
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并向其中添加以下代码：
// 实战项目：React16.8+Next.js+Koa2开发Github全栈项目
以上资源收集至互联网
如有侵权请联系删除
资源获取方式
回复密码'20190818'
即可获得
截图展示
课程信息
课程难度：中级
学习人数：49863
课程状态：已完结
时长：六周
课程介绍
讲解 Nextjs 项目的搭建，
其中会搭建自己的服务集成 Koa，
集成 Antd 作为组件库。介绍什么是 Hooks，
基础 Hooks 的使用，包括 State Hooks，
Effect Hooks、Context Hooks
和优化相关的 Hooks。
着重介绍 Redux 如何集成到 Nextjs 当中。
课程大纲
第1章课程导学
1-1 课程导学
第2章项目搭建
2-1 关于项目所用的npm包版本号
2-2 创建next.js的项目
2-3 next作为koa中间件使用
2-4 koa使用方式介绍
2-5 redis的windows安装
2-6 redis的mac安装
2-7 redis基本使用
2-8 nodejs连接redis数据库
2-9 nextjs集成antd
第3章 Next.js基础
3-1 nextjs项目目录结构
3-2 页面跳转
3-3 动态路由
3-4 路由映射
3-5 路由变化的钩子
3-6 nextjs数据获取方式
3-7 nextjs自定义App
3-8 nextjs自定义Documen
3-9 nextjs样式的定义
3-10 nextjs集成styled-components
3-11 nextjs中异步模块和组件的加载
3-12 nextjs中的配置项
3-13 nextjs服务端渲染流程深度解析
第4章 React新特性Hooks讲解
4-1 什么是Hooks
4-2 State-Hooks讲解
4-3 Effect-Hooks讲解
4-4Context-Hooks讲解
4-5 Ref-Hook讲解
4-6 Hooks渲染优化
4-7 闭包陷阱
第5章引入Redux
5-1 什么是Redux
5-2 创建一个store
5-3 redux中的reducer
5-4 redux中的action
5-5 react-redux连接react和redux
5-6 redux-devtool的使用
5-7 nextjs中的HOC
5-8 nextjs集成redux（1
5-9 nextjs集成redux（2
第6章 OAuth 介绍和接入
6-1 认证和授权介绍
6-2 OAuth概述
6-3 code认证方式的流程
6-4 注册github-OAuth-Ap
6-5 OAuth的字段讲解以及流程演示
6-6 OAuth-code认证方式如何保证安
6-7 next-05-07(标记处网页字小)-cookie和session-part1_x264
6-8 创建koa-seesion的redis存储store（1
6-9 创建koa-seesion的redis存储store（2
6-10 接入Github-OAuth（1）
6-11 接入Github-OAuth（2
第7章项目整体设计
7-1 项目整体需求介绍
7-2 页面整体布局Layout组件的开发
7-3 cloneElement扩展组件可复用性的高级技巧
7-4 服务端渲染同步用户信息
7-5 完善登录功能
7-6 用户登出功能实现
7-7 维持OAuth之前得页面访问
7-8 增加全局页面切换的Loading效果
7-9 Github接口代理
7-10 完善整体布局
7-11 Github接口代理完善
7-12 koa中处理post请求的数据
第8章首页开发
8-1 联调主页数据
8-2 展示用户数据以及用户登出时的页面内容
8-3 Repo组件展示基本组件内容的开发
8-4 tab切换展示创建的仓库和关注的仓库
8-5 使用缓存数据
8-6 使用缓存更新策略
第9章搜索页面开发
9-1 搜索功能概述
9-2 搜索接口联调以及搜索条件展示
9-3 搜索条件删选功能实现
9-4 搜索条件跳转的优化-提取组件
9-5 搜索结果的展示
9-6 处理Github搜索结果限制
第10章仓库详情页开发
10-1 仓库详情页面功能概述
10-2 仓库布局开发
10-3 提取布局成为一个HOC
10-4 仓库基础信息缓存功能的实现
10-5 获取markdown内容并转义
10-6 使用markdown-it来转换markdown
10-7 打包分析
10-8 issues页面的开发
10-9 创建用户搜索组件
10-10 完成issue搜索功能的开发
10-11 完善issues页面
10-12 仓库详情页面功能概述
第11章项目优化
11-1 nextjs静态页面导出功能
11-2 项目部署
11-3 总结
其他资源
知识星球用户领取资源入口
点击阅读原文
以上是关于如何使用Next.js创建全栈应用程序的主要内容，如果未能解决你的问题，请参考以下文章
如何在带有 TypeScript 的 next.config.js 中使用 i18n 和 next/image？