Next.js-14搭建开发环境

date

Jul 13, 2024 10:08 AM

type

status

slug

summary

什么是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文件，还有其他几个常用的文件，剩余的可以查询官方文档。

ㅤ	ㅤ	ㅤ	ㅤ
`layout`	`.js` `.jsx` `.tsx`	Layout	这里是布局页面内容
`page`	`.js` `.jsx` `.tsx`	Page	对应路由页面展示的内容
`loading`	`.js` `.jsx` `.tsx`	Loading UI	页面加载中的样式页面
`not-found`	`.js` `.jsx` `.tsx`	Not found UI	404页面内容
`error`	`.js` `.jsx` `.tsx`	Error UI	当页面上出现了错误的时候可以在此页面中处理
`global-error`	`.js` `.jsx` `.tsx`	Global error UI	ㅤ
`route`	`.js` `.ts`	API endpoint	你可以在这里编写接口用来处理get post这样的接口内容
`template`	`.js` `.jsx` `.tsx`	Re-rendered layout	ㅤ
`default`	`.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 如果是一个已经有数据的项目，就不能使用这个命令了，转而使用 prisma migrate 迁移。本文先不涉及。

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框架继续完善这个项目