Next.js 全栈开发

课程介绍

Next.js 是一个用于生产的 React 框架，它为您提供构建静态和动态 Web 应用程序所需的所有功能。本课程将带您全面了解 Next.js，从基础概念到实际项目开发。

学习成果

通过本课程，您将能够：

• 掌握 Next.js 的核心概念和最佳实践
• 创建性能优化的服务端渲染网站
• 使用 App Router 构建现代化应用程序
• 实现完整的全栈功能，包括 API 路由和数据库集成
• 部署和优化您的 Next.js 应用程序

课程大纲

第一课：Next.js 入门

Next.js 是一个 React 框架，它为您提供构建静态和动态网站所需的功能，包括：

• 服务器端渲染：提高首屏加载速度和 SEO 表现
• 静态站点生成：预渲染页面，提供极快的加载体验
• 文件系统路由：基于文件结构的直观路由系统
• API 路由：轻松创建 API 端点

安装与配置

创建一个新的 Next.js 项目：

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? No
Would you like to use App Router? Yes
Would you like to customize the default import alias? No

项目结构

my-next-app/
├── app/
│   ├── page.js       # 首页
│   ├── layout.js     # 根布局
│   └── globals.css   # 全局样式
├── public/           # 静态资源
├── next.config.js    # Next.js 配置
└── package.json      # 项目依赖

作业与实践

1. 创建一个新的 Next.js 项目
2. 添加至少三个页面并实现导航
3. 尝试使用不同的数据获取方法
4. 部署项目到 Vercel

下节预告

在下一节课中，我们将深入探讨 Next.js 的数据获取方法，包括静态生成、服务器端渲染和客户端获取数据的不同策略。