date
Jul 13, 2024 10:08 AM
type
status
slug
summary
tags
category
updated
Aug 14, 2024 02:43 AM
icon
password
什么是Next.js
Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您可以使用 React Components 来构建用户界面,并使用 Next.js 来实现附加功能和优化。
安装项目
请确保你的操作系统上安装了Node.js 18.17 或更高版本。
我们采用官网上的自动安装,这样会方便很多
这样就得到了一个Next.js的项目
安装其他的插件
项目简介
这里提醒一下next.js是默认在服务端渲染的框架,对于需要在浏览器中渲染的内容,当然这也就说明你需要浏览器的api或者对应的react hooks。那么你需要在文件的最顶部添加
use client
。记住 use server
使用在函数里面的,而不是tsx的样式组件中,表明该函数在服务端使用。app
由于我们采用的APP路由模式,在Next.js中文件既是路由。也就是说这是约定熟成的规则。
除了这2个必要的tsx文件,还有其他几个常用的文件,剩余的可以查询官方文档。
ㅤ | ㅤ | ㅤ | ㅤ |
.js .jsx .tsx | Layout | 这里是布局页面内容 | |
.js .jsx .tsx | Page | 对应路由页面展示的内容 | |
.js .jsx .tsx | Loading UI | 页面加载中的样式页面 | |
.js .jsx .tsx | Not found UI | 404页面内容 | |
.js .jsx .tsx | Error UI | 当页面上出现了错误的时候可以在此页面中处理 | |
.js .jsx .tsx | Global error UI | ㅤ | |
.js .ts | API endpoint | 你可以在这里编写接口用来处理get post这样的接口内容 | |
.js .jsx .tsx | Re-rendered layout | ㅤ | |
.js .jsx .tsx | Parallel route fallback page | ㅤ |
这里提供我遇到的文件写法案例。
public
公共资源文件夹,这儿通常存放图片或一些公共文件。例如
public\next.svg
在组件上使用的地址就是/next.svg
。next.config.mjs
next.js的配置文件,这里的具体情况可以查看官网文档。我这里提供我用的一个案例,就是重定向。
数据库连接(可选)
说明以及安装
在连接数据库之前,我们需要了解数据库和orm之间的关系,orm是一种数据关系映射的工具,它用作编写纯 SQL 或使用其他数据库访问工具。这样的话,我们不用关心多种数据库的连接,改变数据库版本之后要修改代码等等问题。
初始化之后会得到prisma的文件夹(如果你初始化失败,八成是你的网络连不上国外的网络)。
新建
.env
文件,这个是本地的环境变量设置prisma配置
上面新建的环境变量文件,那么就需要prisma来连接数据库了。
打开
prisma\schema.prisma
文件创建数据库
添加如下的模型到
prisma\schema.prisma
文件中之后做如下操作,同步本地的表结构到数据库中。
当然你可能会修改数据库的表结构什么,为了方便可以在
package.json
把启动命令配置一下。更新表结构至线上数据库中使用npx prisma db push
Next.js客户端上使用
安装客户端
然后在
lib/prisma.ts
中写入之后你可以在任意地方引入然后编写数据库操作语句。例如
你也可以使用
npx prisma --help
查看更多的语法Next-auth(可选)
这是Next.js出品的用户验证插件,主要是完成像用户登录、会话管理、校验流程。具体查看官网
首选正常我们在页面中登录。
我们在
app/lib/actions.tsx
在
/auth.ts
中写入。这里主要处理的就是账号密码验证配置需要登录才能访问的路由。在
auth.config.ts
然后用中间件保护路由
/middleware.ts
这样就完成了用户的登录验证问题。
Fetch(可选)
这个主要是为了将Next.js纯作为一个SSR项目使用,只做前端页面开发。
值得注意的是,Next.js毕竟是混合开发,也就是混合客户端和服务端的开发。所以你的接口请求虽然说是请求第三方,但是还是得考虑这个请求是发生在服务端还是客户端上。
对fetch做一个封装,让它能够自动对头部做参数添加。以及对于401的错误处理。
由于要考虑服务端所以,服务端上的token处理就采用cookie的方式。
使用案例
设置开发代理
next.config.mjs
添加状态管理插件
本项目状态管理没有选择传统的 redux 而是选择了比较轻巧的 zsutand该状态管理对于一般的项目已经足够用了
然后在
store/user.ts
中写入如下内容使用案例
国际化
- next-i18next: 一款流行的
Next.js
国际化插件,它提供了丰富的功能,包括多语言路由、服务器端渲染和静态生成的支持,以及简单的翻译文件管理。
- next-intl: 用于
Next.js
的国际化插件,它提供了基于React Intl的国际化解决方案,支持多语言文本和格式化。
- next-translate: 这个插件为
Next.js
提供了简单的国际化解决方案,支持静态生成和服务器端渲染,并且易于配置和使用。
使用
next-intl
插件,主要是网上看了对比的文章,这款插件从扩展和使用灵活性上都非常不错。官方文档中提供了2种方式,一种基于路由地址,一种是不基于路由地址。我这里就选择路由地址。
同时这里我改用自定义的路径,以便项目更加好管理。并这里使用静态渲染,因为我喜欢在文件中使用异步函数。非静态渲染不能使用异步函数也就是它不在服务端渲染的。
- 在
i18n/messages/en.json
中写入下面的内容
同理在
i18n\messages\zh.json
写入- 现在,设置插件,该插件创建别名以向服务器组件提供 i18n 配置(在下一步中指定)。
next.config.mjs
next.config.js
- 在
i18n\i18n.ts
中使用next-intl
创建一个请求范围的配置对象,可用于根据用户的区域设置提供消息和其他选项,以便在服务器组件中使用。
middleware.ts
中间件匹配请求的区域设置并相应地处理重定向和重写。
app\[locale]\layout.tsx
这里需要调整一下自定义生成的文件,将app下面的约定文件例如layout.tsx移入到[locale]文件夹下
app/[locale]/page.tsx
在页面组件或其他任何地方使用翻译!
到此国际化,axios等设置就基本完成了,下面我使用一个next.js的UI框架继续完善这个项目