编程马·菜鸟教程

Appearance

第2章：前端与开发环境前置准备 ​

2.1 必备基础回顾（React 核心语法、ES6+、Node.js 基础） ​

React 核心语法 ​

组件 ​

jsx
// 函数组件
function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

// 类组件
class HelloWorldClass extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

Props ​

jsx
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// 使用
<Greeting name="John" />

State ​

jsx
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Hooks ​

jsx
import { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);
  
  return <p>Time: {time} seconds</p>;
}

ES6+ 语法 ​

箭头函数 ​

javascript
// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

解构赋值 ​

javascript
// 对象解构
const person = { name: 'John', age: 30 };
const { name, age } = person;

// 数组解构
const numbers = [1, 2, 3];
const [first, second, third] = numbers;

模板字符串 ​

javascript
const name = 'John';
const greeting = `Hello, ${name}!`;

async/await ​

javascript
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

模块化 ​

javascript
// 导出
export const add = (a, b) => a + b;
export default function subtract(a, b) {
  return a - b;
}

// 导入
import subtract, { add } from './math';

Node.js 基础 ​

npm 命令 ​

bash
# 初始化项目
npm init

# 安装依赖
npm install <package-name>

# 安装开发依赖
npm install --save-dev <package-name>

# 运行脚本
npm run <script-name>

package.json ​

json
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My project",
  "main": "index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

2.2 开发工具安装：VS Code + 必备插件（ESLint、Prettier、Next.js 插件） ​

VS Code 安装 ​

  1. 下载 VS Code：访问 Visual Studio Code 官网 下载并安装
  2. 安装完成后：打开 VS Code，开始安装插件

必备插件 ​

ESLint ​

  • 作用：代码检查工具，帮助发现和修复代码中的问题
  • 安装：在 VS Code 扩展面板中搜索 "ESLint" 并安装
  • 配置：在项目根目录创建 .eslintrc.js 文件
javascript
module.exports = {
  extends: [
    'next/core-web-vitals',
  ],
};

Prettier ​

  • 作用：代码格式化工具，保持代码风格一致
  • 安装：在 VS Code 扩展面板中搜索 "Prettier" 并安装
  • 配置：在项目根目录创建 .prettierrc 文件
json
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Next.js 插件 ​

  • 作用：提供 Next.js 项目的语法高亮和智能提示
  • 安装：在 VS Code 扩展面板中搜索 "Next.js" 并安装

其他推荐插件 ​

  • React Developer Tools：React 调试工具
  • Path Intellisense：路径自动补全
  • GitLens：Git 增强工具
  • Code Spell Checker：拼写检查

2.3 环境配置：Node.js 18+ 版本要求、pnpm/npm/yarn 选型与配置 ​

Node.js 安装 ​

  1. 下载 Node.js：访问 Node.js 官网 下载并安装 Node.js 18+ 版本
  2. 验证安装：打开终端，运行 node -v 查看 Node.js 版本
  3. 验证 npm：运行 npm -v 查看 npm 版本

包管理器选型 ​

npm（Node Package Manager） ​

  • 默认包管理器：Node.js 内置
  • 使用命令：
    bash
    npm install
npm run dev

pnpm（Performant npm） ​

  • 优势：更快的安装速度，更小的磁盘占用
  • 安装：
    bash
    npm install -g pnpm
  • 使用命令：
    bash
    pnpm install
pnpm dev

yarn ​

  • 优势：稳定的依赖管理，缓存机制
  • 安装：
    bash
    npm install -g yarn
  • 使用命令：
    bash
    yarn install
yarn dev

环境变量配置 ​

  1. 创建 .env.local 文件：在项目根目录创建 .env.local 文件
  2. 添加环境变量：
txt
# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
API_SECRET_KEY=your-secret-key
  1. 使用环境变量：
javascript
// 客户端
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

// 服务端
const secretKey = process.env.API_SECRET_KEY;

2.4 浏览器调试工具：React Developer Tools、Next.js 调试技巧 ​

React Developer Tools ​

  1. 安装：在浏览器扩展商店搜索 "React Developer Tools" 并安装
  2. 使用：
    • Components 标签：查看组件树，检查 props 和 state
    • Profiler 标签：分析组件性能

Next.js 调试技巧 ​

控制台调试 ​

javascript
// 在代码中添加 console.log
console.log('Debug information:', variable);

// 使用 console.table 查看对象
console.table(data);

// 使用 console.error 查看错误
console.error('Error:', error);

断点调试 ​

  1. 在 VS Code 中设置断点：点击代码行号左侧添加断点
  2. 启动调试：按 F5 启动调试模式
  3. 单步执行：使用 F10（单步跳过）、F11（单步进入）、Shift+F11（单步退出）

开发工具网络面板 ​

  • 查看网络请求：在浏览器开发者工具的 Network 标签中查看 API 请求
  • 分析请求详情：查看请求头、响应头、响应内容
  • 模拟网络条件：模拟慢速网络，测试加载状态

2.5 第一个 Next.js 程序：在线 playground 快速体验（无需本地配置） ​

使用 Next.js Playground ​

  1. 访问 Next.js Playground：打开 https://nextjs.org/playground
  2. 体验示例代码：
    • 查看默认的示例代码
    • 修改代码，实时查看效果
    • 了解 Next.js 的基本结构

在线创建 Next.js 项目 ​

  1. 使用 Vercel：访问 https://vercel.com/new
  2. 选择 Next.js：在模板列表中选择 Next.js
  3. 创建项目：跟随向导创建项目，自动部署到 Vercel
  4. 访问项目：获取部署后的 URL，查看在线效果

本地快速体验 ​

  1. 使用 create-next-app：

    bash
    npx create-next-app@latest my-next-app --experimental-app

  2. 进入项目目录：

    bash
    cd my-next-app

  3. 启动开发服务器：

    bash
    npm run dev

  4. 访问应用：打开浏览器，访问 http://localhost:3000

  5. 查看示例代码：

    • app/page.js：首页组件
    • app/layout.js：布局组件
    • app/globals.css：全局样式

小结 ​

本章介绍了 Next.js 开发的前置准备工作，包括 React 核心语法、ES6+ 语法、Node.js 基础、开发工具安装、环境配置以及浏览器调试工具。通过本章的学习，你应该已经为 Next.js 项目的开发做好了准备。

在开始 Next.js 项目开发之前，确保你已经：

  1. 掌握了 React 核心概念和 ES6+ 语法
  2. 安装了 Node.js 18+ 版本
  3. 选择并配置了合适的包管理器
  4. 安装了 VS Code 和必备插件
  5. 了解了浏览器调试工具的使用

接下来，我们将学习 Next.js 项目的创建与目录解析，开始正式的 Next.js 开发之旅。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建