likes
comments
collection
share

初尝Nextjs及总结

作者站长头像
站长
· 阅读数 4

为什么会去学习NEXT呢？ 了解新技术，好奇前端怎么通过写sql直接调用数据库来获取数据。本文只是在学完Next.js@14官网的指导教程之后归纳总结。

项目准备工作

  1. Node.js版本需要18.17.0以上
  2. 注册好GitHub账号和Vercel账号（部署线上环境）

创建项目

为了更快速的学习基础内容，官网准备好了dashboard项目模板，通过create-next-app来生成项目。

npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

文件结构

初尝Nextjs及总结
  • /app: 包含所有的路由页面、组件；
  • /app/lib: 存放一些公共的方法或者类；
  • /app/ui: 通用UI组件；
  • /public: 静态资源文件；
  • /scripts: 存放脚本相关资源

页面路由

NEXT采用文件系统路径方式再加上自身添加的特殊规定来创建页面路由。在app目录下面的所有文件夹只要存在page.tsx文件，NEXT都会自动维护成路由。比如如果需要创建/dashboard路由，文件结构形式如下： 初尝Nextjs及总结 实际项目在运行的时候，除了这种静态路由，还会存在因为参数而变换的路由，比如/dashboard/invoices/${id}/edit，其对应的文件路径： 初尝Nextjs及总结

特殊的文件结构

在这之前，先介绍下NEXT一些特定的文件，比如layout.tsx、error.tsx、not-found.tsx等文件，这些文件在被应用的时候，存在优先级，优先获取的是同该page.tsx同目录的，如果该目录不存在，则往父级目录查找，直到/app层级。

路由分组（Route Groups）

路由分组的概念就是为了解决上面介绍的特定文件被应用到所有子目录下，通过增加子目录/(overview)，且当前的page.tsx等文件放到该子目录下。如下 初尝Nextjs及总结

功能模块

NEXT项目组件分为Client Components和Server Components。默认情况下Next使用的React Server Components。

获取数据方式

针对不同的组件类型，提供的方式不同。这里介绍下Server Components获取数据的方式，使用服务器组件获取数据的好处如官方说的：

  • Server Components support promises, providing a simpler solution for asynchronous tasks like data fetching. You can use async/await syntax without reaching out for useEffect, useState or data fetching libraries.
  • Server Components execute on the server, so you can keep expensive data fetches and logic on the server and only send the result to the client.
  • As mentioned before, since Server Components execute on the server, you can query the database directly without an additional API layer.

数据库查询（Database queries）

import { sql } from '@vercel/postgres';
export async function fetchCardData() {
  try {
    const invoiceCountPromise = sql`SELECT COUNT(*) FROM invoices`;
    const customerCountPromise = sql`SELECT COUNT(*) FROM customers`;
    const invoiceStatusPromise = sql`SELECT
         SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) AS "paid",
         SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) AS "pending"
         FROM invoices`;
    ......
}

部分预渲染（Partial Prerendering）

该模式现在是实验阶段，采用了React18的并发API和Suspense实现。官方提供了体验Demo。

Note:  To learn more about how Partial Prerendering can be configured, see the Partial Prerendering (experimental) documentation or try the Partial Prerendering template and demo. It's important to note that this feature is experimental and not yet ready for production deployment.

Server Actions

Server Actions 则打通了客户端与服务端“数据”分界。 以往客户端跟服务端通信，一般都是服务端暴露http接口，客户端通过API来调用。server Actions通过封装这部分，使用者不需要再关注接口路径、接口定义的入参跟出参。

通过使用'use server'来定义，目前两种创建方式：

  • Server Components可以通过在函数顶部或者新开文件顶部增加'use server'
// Server Component
export default function Page() {
  // Server Action
  async function create() {
    'use server'
 
    // ...
  }
 
  return (
    // ...
  )
}
  • Client Components只能通过新建文件增加'use server'，再在使用的地方import
'use server'
 
export async function create() {
  // ...
}

import { create } from '@/app/actions'
 
export function Button() {
  return (
    // ...
  )
}

运行项目

终端通过运行npm run dev启动应用

vscode debug模式

增加launch.json文件，加入下列配置

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Next.js: debug server-side",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev"
          },
          {
            "name": "Next.js: debug client-side",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000"
          },
          {
            "name": "Next.js: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev",
            "serverReadyAction": {
              "pattern": "- Local:.+(https?://.+)",
              "uriFormat": "%s",
              "action": "debugWithChrome"
            }
          }
    ]
}

部署项目

本文通过官方推荐的Vercel实现部署，具体的部署方式介绍点击，Demo查看

Demo账号：user@nextmail.com，密码：123456

结尾

整个Demo教程接触完下来，对Next涉及到技术实现方案感兴趣了。

  • 怎么实现优先部分预渲染？通过stream实时通知？
  • 类文件系统路由的设计方案及实现逻辑？
  • components在server那端的逻辑？
转载自:https://juejin.cn/post/7347904631295606836
评论
请登录