Next.js是一个基于React的全栈应用程序开发框架，它可以帮助开发人员轻松地构建一个完整的应用程序，包括前端和后端。
这篇文章就带大家简单了解一下如何使用Next.js去构建全栈App。
前端
Next.js有很多的样式方案，参考官网
原生css
在Next.js中使用原生css，你可以直接在_app.tsx中全局引入
import 'bootstrap/dist/css/bootstrap.css'
import '../styles/global.css'
或者为避免全局类名的冲突，也可以在组件文件中引入用*.module.css。
import styles from './button.module.css'
<Button className={styles.button}>button</Button>
Sass
Next内置Sass支持，但在使用之前，你需要安装sass:
npm install --save-dev sass
其使用方法和原生css一致，也可以在_app.tsx中直接引入*.scss或在组件中引入*.module.scss。
Css in js
const Button = styled.button`
font-size: 1rem;
`
<Button>button</Button>
<button style={{ fontSize: 16 }}>button</button>
UI框架
使用成熟的ui框架，我们能够快速的完成页面搭建。
其中如果你习惯使用css，你可以选择：
如果你习惯使用css in js，你可以选择：
前端是否需要使用UI框架，取决于具体的项目需求和开发团队的技术水平和偏好。如果项目需要快速搭建界面或者需要统一风格，使用UI框架可能是一个明智的选择。但对于一些小型项目或者对灵活性有较高要求的项目，可能更适合手写CSS和自定义组件。
API风格
RESTful API
RESTful API是一种基于REST（Representational State Transfer）架构风格的API设计规范，通过HTTP协议定义对资源的操作方式，使得客户端和服务器之间的交互建立在资源的概念上，具有统一接口、资源为中心、无状态、可缓存和分层系统等特点。
tRPC
RPC（Remote Procedure Call）是一种基于函数调用的API风格，客户端通过调用远程服务器上的函数来实现数据交互。trpc是一个基于TypeScript的全栈RPC框架，它提供了一种简单而强大的方式来定义和调用后端服务。
GraphQL
GraphQL是一种用于API的查询语言和运行时环境，由Facebook于2012年开发。它提供了一种更高效、强类型、灵活和直观的方法来获取数据。与REST API相比，GraphQL允许客户端精确地指定请求的数据，减少了不必要的数据传输，提高了性能。
ORM
ORM(Object Relational Map)，对象-关系映射。其提供了与数据库交互的高级接口，能够帮助开发者简化对数据库的操作。
例子如下(TypeORM)：
@Entity()
class Student {
@PrimaryGeneratedColumn()
id: number
@Col()
name: string
}
class UserService {
find() {
return Student.find()
}
async create(name: string) {
const stu = new Student()
stu.name = name
await stu.save()
}
}
在ORM中，对象之间存在着一对一、一对多、多对一、多对多的关系，这些关系非常重要，可以帮助开发者更好的组织数据，实现数据的关联和查询。
@Entity()
class Student {
...
@OneToOne()
profile: Profile
@OneToMany(...)
scores: Score[]
@ManyToMany(...)
@JoinTable()
teachers: Teacher[]
}
Node常用的ORM如下：
我们该如何选择呢？
对比上面几个ORM，Prisma的风格更接近函数式编程，而其他ORM更偏向于面向对象编程，并且在Typescript项目中使用装饰器的话，需要做更多的配置操作。
所以对于Next.js来说，其实使用Prisma更为契合。
结合
综上所述，强烈推荐大家使用 Next.js + Prisma + PostgreSQL / MySQL 的技术栈去实现自己的全栈App，当然，其中的前端样式方案可以根据自己的喜好去选择。
这里推荐几个使用上述技术栈实现的项目，可以借鉴学习一下。
-
umami 一个可自定义部署的、轻量级的Google Analytics
-
typebot.io 一个很有趣的聊天框App
