最新文章

本文是本系列的最后一篇，介绍如何部署Next.js应用。 部署前准备 部署前要进行本地化部署，如果本地有错，部署过程也会出错。 npm run build 提示GoogleAnalyticsScript出错，需要加上id。我们就加上。 再运行npm run build。还是出错。提醒： “authOptions” is not a valid Route export...

本文我们来学习内置在Next.js的优化技术，内容有：优化图片，使用第三方JS库，使用自定义字体，搜索引擎优化，延迟加载。 图片 Next.js有Image组件，我们应该用它来代替原生html的 image，因为Next.js的Image有自动压缩及根据屏幕的尺寸自动调整大小的特性。 我们在public目录下新建images目录，并放置一张图片coffee.jpg，该图片大小有5M。再修改app/page.tsx，Image组件的属性src调用图片的方法类似于使用对象，不用加双引号。...

本文学习如何在Next.js项目中发送电子邮件。 设置Next Email 发送电子邮件有个强大的库叫React Email。 https://react.email React Email提供一些组件用于创建HTML Email，同时也提供工具预览电子邮件以及提供函数来发送邮件。 安装： npm install react-email @react-email/components 再到package.json，修改script：...

​本文学习在Next.js项目中进行身份验证。内容包括设置Next Auth, 配置Google身份验证，身份认证的会话，路径的保护，身份信息的数据库保存，以及配置身份认证允许邮件和密码登录。 设置Next Auth 我们选择Next Auth用于身份验证，这是非常流行的库，官网地址是： https://next-auth.js.org 安装： npm install next-auth 再创建路径：/auth/[…nextauth]/route.tsx。...

本文学习如何在Next.js应用中上传文件。 选择云平台 需要选择某个云平台存储用户上传的文件。有很多云平台可以选择，比如Amazon S3、Google Cloud、Microsoft Azure等，本节我们选择的是Cloudinary，因为它与Next.js集成度最好，而且还它提供一些React组件供我们的项目使用。 使用Cloudinary的代码较少，只需一些配置。与之对比，如果使用Amazon...

本篇介绍利用流行库Prisma与数据库的连接。 我们将学习设置Prisma，定义数据模型，创建迁移，执行 CRUD 操作。 安装MySQL Prisma支持各种数据库，我们选择MySQL。官网：mysql.com，进入 downloads，下载并安装Community版。 MySQL官网提供了客户端工具 “MySQL Workbench”，可以下载使用。更好用的工具是DataGrip，可以免费使用30天。...

本篇来学习如何使用Next.js构建API。 我们将学习构建获取对象、创建对象、更新对象、删除对象的API，并学习用Zod进行数据验证。 获取对象集合 前面我们介绍过使用page.tsx来实现向用户展示的组件，处理HTTP请求的操作则用 route.tsx。 根据传统，API一般使用 /api的url前缀，我们创建名为api的文件夹。再创建users目录，并在其下新建route.tsx文件。 实际项目中，数据从数据库获取，然后转成对象及json返回给用户。这里暂时用硬编码的方式，数据库获取相关内容后续我们会专门介绍。...

本篇来学习Next.js的路径和导航。内容包括： 定义动态路径、访问路径和查询参数、创建布局、显示加载界面以及处理错误等。 路径概述 前面我们介绍过Next.js是通过文件系统进行路由的，比如之前的users。Next.js除查找page.tsx这个特定文件外，还查看其他特定文件，如下图。 layout.tsx用于定义通用的布局。 loading.tsx用于显示加载界面。 route.tsx用于建立APIs。...

本篇来学习Next.js的样式。 我们将了解全局样式，CSS模块，Tailwind CSS，以及DaisyUI等各种样式知识。 全局样式 app文件夹下有一个global.css，这是全局的css，应用于所有页面。 前3行，它导入了tailwind的相关css。后面 root、body等都是全局设置的。 我们稍清理一下该文件。值得注意的是： 该文件的CSS一定要确实是全局有用的。 我们不能在里面定义.userlist之类的特别用于某个组件的css，这样会导致globals.css臃肿，在组件删除时还需记住删掉这些特殊CSS，最终可能会导致很多无用的css存在。...

​本系列开始介绍Next.js. 先决条件 学习本系列，你无需任何Next.js知识，但需要对React、TypeScript有基本的了解。 什么是Next.js Next.js是一个用于构建快速且搜索引擎友好的应用程序的框架。 Next.js基于React，React相关技能在Next.js中一样有效。不同的是，React只是一个用于创建交互UI的库，而Next.js则是一个综合的框架。 比如，在React中，我们需要单独安装react-router，而在Next.js中则无需安装，它已经自带了。...