【react框架】跟我一起速读Next.js官方入门教学课程文档

文章目录

前言
目录结构
样式方案
- 正常引入样式文件
- Tailwind方案
- CSS Modules方案
- clsx方案
文字和图片优化
- 文字
- 图片
Pages和Layout的机制
- Pages
- Layout
通过Link组件改变路由并且拆分打包
提供Hooks
通过Vercel创建数据
未完待续...

前言

对于那些对Next.js一无所知的前端伙伴来说，最佳的快速入门方法无疑是官方提供的交互式入门教程文档。尽管如此，由于官方教程至今未提供中文版本，这无疑增加了中文用户的学习难度。为了帮助大家节省宝贵的时间，我决定亲自深入学习这些材料，并将我所学到的关键信息整理成文。通过阅读我的文章，你也能迅速掌握Next.js的核心要点。

当然学Next.js之前你必须会CRA创建的React项目。

官方入门文档地址：https://nextjs.org/learn/dashboard-app/getting-started

文档如果有错误欢迎指正！

目录结构

如何去初始化一个Next.js项目我就不记录了，很简单。我们还是先看目录结构吧。

初始化工程的目录为：

在这里插入图片描述
/app 这个文件夹里放的是我们开发中大部分手写的代码。内部还可以继续细化为：

/app/lib 放js文件，例如一些工具函数，API文件等
/app/ui 放组件，例如公共组件、业务组件等

/public 放静态资源，例如图片

/script 放一些数据有关的脚本

/next.config.mjs 在里头可以添加或者修改Webpack设置

其他文件咱们下面讲到对应章节再补充说明~

样式方案

Next对样式的编写提供和推荐了一些方案。

正常引入样式文件

Next给默认设置了路径别名，所以你只需要这样引入样式文件：

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

Tailwind方案

这个库有多火就不说了，不是文章重点学习部分，大概意思就是这个库帮你编写了很多类名的css样式，例如你想要某个h1标签的文字颜色为蓝色且字重为500，那么你就可以这样写：

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

这样就会自动加上css规则。

感兴趣的自己去看吧，官方文档地址为：https://tailwindcss.com/

CSS Modules方案

这个是CRA创建时默认的CSS隔离方案，就不多说了。

clsx方案

这个库就是方便我们在写class的时候做一些条件判断，例如文档中的例子：

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',
        },
      )}
    >
    // ...
)}

是不是比写什么三元表达式清晰很多。感兴趣的可以查看官方文档：https://www.npmjs.com/package/clsx

综上所述，在Next应用中，使用这些样式方案基本能满足我们的需求了。

文字和图片优化

Next自动的对文字和图片做了很好的优化，减少我们平时对这方面的处理工作。

文字

假如我们需要用自定义的字体，那么会有两个问题：

页面第一次加载静态资源的时候，需要拉取和加载自定义字体文件。
一旦文字文件被解析，页面将经历一个文字替换的过程。然而，由于自定义字体的行高、尺寸和字重与默认字体不同，从默认字体切换到自定义字体时，页面的布局可能会出现偏移。

Next帮我们处理了上述的问题，并且能够做到第一次加载页面不会拉取字体文件的同时，页面直接显示的就是我们的自定义字体。

做法是，首先创建一个文件/app/ui/fonts.ts来引入教程给我们预装好的字体文件：

import { Inter, Lusitana } from 'next/font/google'; // 如果是我们自己的字体如何引入？这点我后续有空了尝试下，先按照教材的理解即可
 
export const inter = Inter({ subsets: ['latin'] }); // 这个意思是从这个字体中提取latin这一个模块的字体

export const lusitana = Lusitana({ // 还可以设定一些属性
  weight: ['400', '700'],
  subsets: ['latin'],
});

然后我们给全局的文字替换成我们自定义的latin字体（好像是替换英文和阿拉伯数字），只需要在/app/layout.tsx中引入并使用：

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

同时官方还推荐使用Tailwind的antialiased类名，让文字看起来更加平滑清晰。在其他子组件使用也是一样的方式。

字体属性的设定有很多，具体可以参考官方文档：https://nextjs.org/docs/app/api-reference/components/font#font-function-arguments

还有文档中提到好像有些属性对谷歌某些字体是没有用的，具体要上谷歌字体官网上去查看（需翻墙）：https://fonts.google.com/

图片

首先图片资源官方要求放在/public目录里。Next提供了Image组件供我们使用，例如：

import Image from 'next/image';
 
export default function Page() {
  return (
    // ...
    <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
      <Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Screenshots of the dashboard project showing desktop version"
      />
    </div>
    //...
  );
}

通过这种使用方式，Next会帮我们做好几件事：

图片从无到加载出来的过程，页面布局不会出现变化
能够适配不同视口的大小
自带懒加载
如果浏览器支持webp，自动提供webp格式

不过我看这个设备屏幕大小适配的问题是通过Tailwind的hidden md:block去解决的？默认隐藏，当视口达到设定的md大小就显示。这点我以后有空验证下。

Pages和Layout的机制

Pages

Next设置了一个由文件结构决定路由地址的机制。例如文章中给的例子：

在这里插入图片描述
这个路由会顺着文件夹里的invoices中找到page.ts文件，文件里面就写组件代码即可，会自动的渲染到页面上。

所以当页面创建多了后，关系参考如下：

在这里插入图片描述
看明白了吧~

Layout

这个组件的作用就是可以把子页面的page组件嵌套在里面，你可以这么理解，Next的路由文件查找机制其实是这样的：

首先沿着路由地址一路过一遍文件夹，例如url=/dashboard/invoices
如果一路都是page.ts，那么找invoices里的page.tsx当做对应的页面。
如果路上有layout.tsx，那么其实是把layout.tsx当做对应的父级页面，然后layout.tsx里的children props变量就是子层级文件夹里page.tsx这个组件。这样page.tsx被嵌在layout.tsx显示在页面上。

来看看layout.tsx代码官方的示例：

import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav /> // 公共组件
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div> // = page.tsx
    </div>
  );
}

同理其他子页面也是一样的，梳理他们之间的关系如下：

在这里插入图片描述

采用这种方式渲染页面可以实现当子组件更新时，父组件无需更新的效果。

所以我的理解是，当你一个页面需要嵌套子组件的时候，就适合用layout组件，当然最大的layout组件在/app里，和他平级的page.ts应该是嵌套在layout组件里（有空时我去验证下）。

通过Link组件改变路由并且拆分打包

Next给我们提供了Link组件去修改路由地址，使用方式：

import Link from 'next/link';
 
// ...
 
export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className="..."
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

这个组件的好处是：Next打包的时候，会自动的通过路由关系去拆分文件，并且不会一下子全部拉取。如果当前页面有Link组件，那么会在背后偷偷预拉取对应的组件代码，等用户点击后直接渲染。

提供Hooks

Next提供了很多hooks供我们使用，例如与路由有关的示例：

'use client'; // 这个意思好像是说这个文件只在浏览器端加载，不作为SSR
 
import { usePathname } from 'next/navigation';
 export default function NavLinks() {
  const pathname = usePathname(); // 获取路由地址
  // ...
}
// ...

通过Vercel创建数据

首先我们要知道什么是Vercel，这里我找AI介绍了下：

Vercel 是一个平台，提供静态和 Jamstack网站的托管服务。它支持多种前端框架，如Next.js、Nuxt.js、Gatsby等，并且能够实现快速部署、服务器端渲染和自动化的性能优化。Vercel 通过其全球分布式的边缘网络（Edge Network）来加速内容的交付，确保用户能够快速加载网站内容。

Vercel 还提供了集成的连续部署功能，允许开发者在代码推送至GitHub、GitLab或Bitbucket等版本控制系统后自动构建和部署网站。此外，Vercel 还提供了一些高级功能，如路由、重写规则、环境变量管理以及HTTPS证书等，使得开发者可以轻松管理他们的网站。

咱们这个Next.js也是属于Vercel下的！

首先咱们把我们的Next应用推到自己的github仓库。

然后去Vercel网站创建账号，把github上的仓库关联到Vercel中，然后选中我们的Next应用仓库，导入：

在这里插入图片描述

接着部署：

在这里插入图片描述
成功后会有一个这样的页面：

如果出现部署失败，基本上问题就是要去修改一个文件的配置tsconfig.json：

    "baseUrl": '.',
    "paths": {
		"@/*" : ["./*"],
		"@/app/*": ["app/*"]
	}