时间：2024-12-25 17:18
人气：
作者：admin
Next.js 14 带来了许多激动人心的新特性，包括局部渲染、Server Actions 增强等。作为一名前端开发者，我最近在项目中升级到了 Next.js 14，今天就来分享一下从项目搭建到实际应用的完整过程。
首先，让我们创建一个全新的 Next.js 14 项目：
# 使用 create-next-app 创建项目
npx create-next-app@latest my-next-app
在初始化过程中，你会看到以下选项：
✔ Would you like to use TypeScript? Yes
✔ Would you like to use ESLint? Yes
✔ Would you like to use Tailwind CSS? Yes
✔ Would you like to use `src/` directory? Yes
✔ Would you like to use App Router? Yes
✔ Would you like to customize the default import alias? No
创建完成后，我们来看看项目的核心目录结构：
my-next-app/
├── src/
│ ├── app/
│ │ ├── layout.tsx # 根布局文件
│ │ ├── page.tsx # 首页组件
│ │ ├── error.tsx # 错误处理组件
│ ├── loading.tsx # 加载状态组件
│ │ └── not-found.tsx # 404页面组件
│ ├── components/ # 组件目录
│ └── lib/ # 工具函数目录
├── public/ # 静态资源目录
├── next.config.js # Next.js 配置文件
└── package.json # 项目依赖配置
Next.js 14 推荐使用 App Router，它基于 React Server Components，提供了更好的性能和开发体验。
// src/app/page.tsx - 首页
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1>Welcome to Next.js 14</h1>
</main>
);
}
// src/app/about/page.tsx - 关于页面
export default function About() {
return (
<div className="p-24">
<h1>About Us</h1>
</div>
);
}
// src/app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<header>
<nav>{/* 导航栏组件 * 
关注微信