Next.js 14 最佳实践系列:第1、2章【来自官方标准】

多加点胡椒

已于 2024-03-04 13:22:20 修改

阅读量1k

点赞数 19

文章标签： css3 css javascript 前端框架前端 turbopack react.js

于 2024-03-02 13:26:43 首次发布

本文链接：https://blog.csdn.net/leadsheep123/article/details/136414154

版权

本系列文章来源于官网 Learn Next.js | Next.js

不同于官网的是，官网是连接数据库获取数据，我提供的是通过调用远程数据。

包括：如何携带token....

介绍

契子：

俗话说，双拳难敌四茹，好汉难耐研磨。总想做些事情反哺社区，思想激烈争斗。决定先翻译一个系列，供初出茅庐的小伙伴阅读。开卷或有益。

这篇系列文章不仅是翻译，更是解说。总想为之正史之写法，奈何怕吾之弟会昏昏欲睡。

又想插科打诨，忧之不正其经，让读者误会。总之，往下看吧，应该会有收获。

注：

一个学习方法，坚持就是胜利，当你不理解的时候不要紧，先往下学。。。如果感觉所学知识超出能力范围太大，建议补充基础知识在学；若超出一点，努努力就可以学会，那你加油，跳出舒适区，在困难区与舒适区之间的，就是你要提升的。踮踮脚就能够着，加油。

欢迎大家来到这个免费课程。在这个交互式课程中，大家可以大学到Next.js的主要功能。

技术栈：

Nextjs
Strapi
Tailwindcss

将要构建什么

在本次课程中，将要构建一个简化版本的财务仪表盘，其中包括

公共主页
登录页面
受身份保护的仪表盘页面
用户可以添加、编辑和删除发票
我们会对接一个无头CMS来构建API供此项目调用【后面会从零到一交给你如何搭建】

这个课程结束以后，你会具备Next.js作为前后端中间层（BFF）架构中的一小层。

注意：

这不是全栈项目，想要做全栈，建议一起学习JAVA。

功能概述

样式：在Next.js中，用不同的方式为程序设置样式
优化：如何优化图像、链接和字体
路由：如何使用Next特有的文件系统路由来创建嵌套布局和页面
数据获取：通过ajax、feth获取数据和流式传输的最佳事件
搜索和分页：如何使用URL搜索参数实现搜索和分页
更新数据：如何使用React Server Actions改变数据，并重新验证Next.js缓存
错误处理：如何处理一般错误和404未找到错误
表单验证和可访问性：如何进行服务端表单验证及提高可访问性提示
身份验证：StrapiAuth（登录注册）
元数据：如何添加元数据并把应用程序进行社交共享

必备知识

JavaScript （必备）
ES6 （必备）
React （必备）
TypeScript （了解即可）
最好有点后端语言知识（不会，也不影响）

系统要求

node 18.17.0+
电脑随意

第1章：入门

创建一个新项目

要创建Next.js应用程序，新建文件夹 next14，打开终端，执行命令

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

这个命令使用`create-next-app`，这个命令行界面（CLI）工具，可以设置Next.js应用程序。在上面的命令中，拉取的是vercel公司提供的示例项目。

示例项目探索

这个教程中的大部分代码都是编写好的，不限于样式、逻辑、组件等，只需要按照教程“组装”，加以理解。这样做的目的是让大家更专注于对Next.js的学习，不被其他因素影响，从而本末倒置。如：被样式所牵绊...

进入项目：

cd nextjs-dashboard

文件夹结构

打开项目可以看到一下的文件夹结构

/app：包含应用程序的所有路由、组件和逻辑，这里是主要的工作目录
/app/lib：包含程序中使用的函数，例如可以重用的使用函数和数据获取函数
/app/ui：包含应用程序所有的UI组件，例如卡片、表格和表单。这些是项目中提前预制好的，可以自己研究
/public：包含所有的静态资源，例如图像
/scripts：
Configs Files：在根目录下有些配置文件，如next.config.js。大多数这些文件是create-next-app启动新项目是创建和预配置的。这个教程中暂时不需要修改，除非...

这些文件随便看，任意玩儿，可能有不理解的地方，请不要担心，后续可以解惑。

占位符数据

当构建用户界面的时候一般都会有虚拟数据占位。当你后端API不可用，就可以：

使用JSON格式的占位数据或者作为JavaScript对象
使用三方mockAPI三方免费JSON数据服务 mockAPI

此项目中，app/lib/placeholder-data.js中提供了一些占位符数据，每一个JS对象代表是代表数据可以的一个表（若知道点后端你就会明白，不明白也关系不大），对于发票表：

const invoices = [
  {
    customer_id: customers[0].id,
    amount: 15795,
    status: 'pending',
    date: '2022-12-06',
  },
  {
    customer_id: customers[1].id,
    amount: 20348,
    status: 'pending',
    date: '2022-11-14',
  },
  // ...
];

TypeScript

项目是用TS编写的，如果不太了解，可以看下官网。

运行开发服务器

执行

yarn      # 安装包
yarn dev  # 运行开发环境

如下，说明运行成功（样式乱了不用担心，下一章教你如何做）

第2章：CSS样式

目前应用程序没有任何的样式，接下来我们一起探讨Next.js设置样式的不同方法。

以下是我们将要一起实现的目标：

如何将全局CSS文件添加到项目中
两种不同的样式方式：Tailwind和CSS模块
如何使用clsx包有条件的添加类名

全局样式

在项目中有 /app/ui文件夹中，有一个global.css的文件。这个文件的CSS样式会应用到全局-例如：重置CSS默认样式等

可以在应用程序的任何组件导入global.css，但是通常将其添加到顶级组件中。在Next.js中，这是根布局（稍后详解）。在/app/layout.tsx导入：

import '@/app/ui/global.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

启动服务，可以看到现在的主页：

令人奇怪的是，global.css中没有任何样式代码规则，主页怎么会变化了呢？

如果你看了文件中的代码，会发现有一些@tailwind 指令

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind CSS是一个原子化CSS框架，可以快速的编写实用程序类，从而加快开发过程。

在Tailwind中，可以通过添加类名称来设置元素样式。例如可以添加类text-blue-500会将<h1>文本变为蓝色：

<h1 className="text-blue-500">I'm blue!</h1>

尽管CSS样式是全局共享的，但是每个类都是单独应用于每个元素。这意味着添加或者删除元素，不必担心维护单独的样式表、样式冲突或者css体积的大小。它都给你优化了，具体可以看官网接收，这里只做个引子。

注：

项目中已经提供写好的Tailwind CSS样式，可以借鉴学习。开始会很不习惯（我开始学的时候也是同样的感觉），写上3、4个页面后就感觉真香~~（带着公司小伙伴在新项目中使用了...）

CSS 模块【项目内置已支持】

CSS 模块通过创建全局唯一的类名来将CSS范围限定为组件，因此可以避免样式冲突。虽然在本项目中会继续使用Tailwind CSS，但是还是会花点时间看看如何使用CSS模块。

在 app/ui文件夹中，创建一个home.module.css新文件并添加一下CSS规则：

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

在 /app/page.tsx中引入看下效果。

import styles from '@/app/ui/home.module.css';
<div className={styles.shape} />;

Tailwind CSS 和 CSS 模块是设计Next.js应用程序的两种最常见的方法。喜欢哪一种用哪一种，甚至混用都可以，不强求。我个人强烈建议使用Tailwind CSS 会打开新的世界，再也不用为了命名而烦恼，并且真的会减小CSS体积。

Clsx库切换类名

在程序开发中有很多情况下，我们需要根据状态或者某些条件下来对元素设置不同的样式。

clsx是一个可以让您轻松实现的一个类库。建议查看文档。

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}