Next.js 在线练习（快速上手）

Next.js 在线练习：无需安装本地环境的实战方案

Next.js 在线练习是学习现代 React 开发的高效方式。通过在线代码沙盒，开发者可以直接在浏览器中运行和调试 Next.js 项目，省去本地环境配置的繁琐流程。

快速解决

使用 CodeSandbox 创建 Next.js 项目只需访问 codesandbox.io ，点击 "Create Sandbox" 后选择 "Next.js" 模板即可开始练习。这种方案能解决"本地开发环境缺失"和"快速启动项目"的需求。

常用方法

详细说明

CodeSandbox 初始化流程

npx create-next-app@latest my-app
cd my-app
npm run dev

1. 第一行命令创建基础项目结构（包含 pages、public 等目录）
2. 第二行进入项目目录
3. 第三行启动开发服务器（默认端口 3000）

Vercel 云端部署配置

// vercel.json
{
  "build": {
    "env": {
      "NEXT_PUBLIC_API_URL": "https://api.example.com"
    }
  }
}

此配置文件可直接在 GitHub 项目中添加，用于定义云端构建时的环境变量。注意 NEXT_PUBLIC_ 前缀会自动暴露给前端代码。

自定义 Webpack 配置

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    })
    return config
  }
}

通过扩展 Webpack 配置，可以添加 SVG 图标支持等自定义功能。此配置在构建时会自动生效。

高级技巧

1. 环境变量管理

// .env.local
NEXT_PUBLIC_THEME=dark
API_KEY=123456

在线沙盒支持 .env.local 文件，但注意敏感信息不应提交到公开代码库。建议在代码注释中说明哪些变量是示例。

2. 添加 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

1. 安装 Tailwind 相关依赖
2. 初始化配置文件
3. 在 next.config.js 中添加：

const withPlugins = require('next-compose-plugins');
const withTailwind = require('./tailwind.config');

module.exports = withPlugins([withTailwind]);

3. 实现 API 路由测试

// pages/api/health.js
export default function HealthCheck(req, res) {
  res.status(200).json({ status: 'healthy', timestamp: Date.now() });
}

配合客户端调用代码：

// pages/index.js
export default async function Home() {
  const res = await fetch('/api/health');
  const data = await res.json();
  return <div>系统状态：{data.status}</div>
}

常见问题

为什么页面刷新后数据丢失？

在线沙盒的临时存储机制导致每次构建后数据重置。建议使用 GitHub 存储重要代码，或在本地开发关键功能后再迁移到在线环境。

如何获取完整的构建日志？

点击沙盒界面右下角的 "Logs" 按钮，可以查看详细的构建输出。对于复杂项目，建议将关键构建步骤保存为脚本文件。

为什么静态资源加载失败？

检查 public/ 目录下的文件是否包含正确的 MIME 类型。对于 .svg 文件，需要在 next.config.js 中添加：

module.exports = {
  pageExtensions: ['page', 'api'],
  images: {
    domains: ['example.com']
  }
}

总结

Next.js 在线练习通过云端开发环境实现了开箱即用的开发体验，配合合理的配置方案可满足从基础学习到高级调试的完整需求。