Next.js14的新功能以及项目的创建、项目结构的分析

Next.js 是目前最流行的基于 React 的全栈 JavaScript 框架。每个版本都不断添加新功能，从 Next.js13 App Router 开始，它就出现了使用 React Server Components (RSC) 等 React 最新功能的应用程序。在我们还在学习Next.js13.4的App Router时，Next.js 已更新至版本 14，这个新版本遵循Next.js 13的API基础进行改进，强化本地开发的效能，并且最佳化伺服器端资料处理和渲染效率，进一步提升Next.js应用程式的效能和开发效率。

Next.js14的新功能

Turbopack：大幅提高性能:

本地服务器启动速度提高 53%
通过快速刷新，代码更新速度提高 94%

Server Actions（服务器操作）：已达到稳定版本，开发者可以直接在React组件中定义服务器端功能，实现客户端与服务器间的无缝交互。这甚至可以在App Router模型中合并错误处理、缓存、重新验证和重新定向。
部分预渲染：快速的初始静态响应，加上动态内容的流式传输。

Next.js14没有更新API,所以Next.js13.4也是使用与14版本的！

现在我们就一起来学习next.js14吧！

安装和配置开发环境

系统要求：

安装了 Node.js 18.17.0 或更高版本。
支持 macOS、Windows（包括 WSL）和 Linux。

创建项目

使用脚手架create-next-app

npx create-next-app@latest

Next.js14的新功能以及项目的创建、项目结构的分析 — image.png

运行

cd learn-next
npm run dev

项目结构

.
├── README.md
├── node_modules
├── app
│   ├── favicon.ico
│   ├── globals.css // 全局样式
│   ├── layout.tsx // 根组件（根布局）
│   └── page.tsx  //页面
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.ts
└── tsconfig.json

/app:包含应用程序的所有路由、组件和逻辑，是我们项目的核心。
/public:用于存放静态资源，如图像、字体、样式表等。
next.config.js:整个next项目的配置文件。
tailwind.config.ts:tailwind css的配置文件。

我们在开发项目的时候也可以自己创建一些目录，比如：

/app/lib:用来存放可重用的实用函数和数据获取函数。
/app/ui: 用来UI 组件，例如卡片、表格和表单。
/app/componets:存放我们自定义的组件，与/app/ui类似，主要看个人的编码习惯。
/scripts或者/utils:存放一些脚本文件。

`layout.tsx`

我们来重点讲一下layout.tsx文件。

layout.tsx是根布局文件，是必须的，根布局必须定义<html>和<body>标签，因为 Next.js 不会自动创建它们。根布局默认是服务器组件，不能设置为客户端组件。

//layout.tsx
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

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

我们来看一下layout.tsx里面的代码：

首先引入globals.css 的全局样式文件
导入了 Next.js 的 Metadata 类型，Metadata 用于定义页面的元信息，如标题和描述。你可以在页面组件中使用这些元信息来设置页面的标题和描述。
导入了谷歌字体，Inter 是一种常用的谷歌字体（Google Font）
RootLayout 是一个函数组件，用于包装整个程序的内容，组件接受一个名为 children 的 prop，它是一个 React 节点数组，代表了组件包裹的子元素。
inter.className：指定页面的字体样式
{children}: 是传递给 RootLayout 组件的子元素，表示实际页面内容，它将在页面的主体部分渲染出来。