3dpar/site

Next.js应用镜像

镜像概述

本镜像基于Next.js框架，通过https://github.com/vercel/next.js/tree/canary/packages/create-next-app%E5%B7%A5%E5%85%B7%E5%BC%95%E5%AF%BC%E5%88%9B%E5%BB%BA%EF%BC%8C%E6%8F%90%E4%BE%9B%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E5%92%8C%E8%BF%90%E8%A1%8CNext.js%E5%BA%94%E7%94%A8%E7%9A%84%E7%8E%AF%E5%A2%83%E3%80%82Next.js%E6%98%AF%E4%B8%80%E4%B8%AAReact%E6%A1%86%E6%9E%B6%EF%BC%8C%E6%94%AF%E6%8C%81%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93(SSR)%E3%80%81%E9%9D%99%E6%80%81%E7%AB%99%E7%82%B9%E7%94%9F%E6%88%90(SSG)%E7%AD%89%E7%89%B9%E6%80%A7%EF%BC%8C%E9%80%82%E7%94%A8%E4%BA%8E%E6%9E%84%E5%BB%BA%E9%AB%98%E6%80%A7%E8%83%BD%E7%9A%84%E7%8E%B0%E4%BB%A3Web%E5%BA%94%E7%94%A8%E3%80%82

核心功能与特性

• 服务端渲染(SSR)：提升首屏加载速度和SEO表现
• 静态站点生成(SSG)：预渲染页面，提供更快的访问体验
• API路由：通过pages/api目录创建API端点，无需额外服务器
• 热重载：开发过程中实时更新页面，提高开发效率
• 文件系统路由：基于pages目录自动生成路由，简化路由配置

使用场景

• 开发Next.js React应用
• 构建需要服务端渲染的Web应用
• 创建包含API功能的全栈应用
• 快速原型开发和演示

使用方法

启动开发服务器

通过以下命令启动开发服务器（假设镜像名称为nextjs-app）：

bash
docker run -p 3000:3000 -v $(pwd):/app nextjs-app npm run dev
# 或使用yarn
docker run -p 3000:3000 -v $(pwd):/app nextjs-app yarn dev

参数说明：

• -p 3000:3000：将容器的3000端口映射到主机的3000端口
• -v $(pwd):/app：挂载当前目录到容器内的/app目录，实现代码实时更新

访问应用

启动后，在浏览器中访问：http://localhost:3000

编辑页面

通过修改pages/about-us.js文件编辑页面内容，开发服务器会自动热重载，无需重启服务。

API路由

API路由可通过http://localhost:3000/api/hello访问，对应的代码文件为pages/api/hello.js。pages/api目录下的文件会被映射为/api/*路由，作为API端点而非React页面。

部署说明

推荐使用Vercel平台部署Next.js应用，这是Next.js官方提供的部署平台：

1. 访问Vercel平台
2. 按照指引连接代码仓库并部署

更多部署方式可参考Next.js部署文档。

学习资源

• Next.js官方文档：了解Next.js特性和API
• Next.js学习教程：交互式学习Next.js
• https://github.com/vercel/next.js/%EF%BC%9A%E8%8E%B7%E5%8F%96%E6%BA%90%E7%A0%81%E5%B9%B6%E5%8F%82%E4%B8%8E%E8%B4%A1%E7%8C%AE