【安装Node.js】

安装Node.js

Next.js 是基于 Node.js 的框架，因此需要先安装 Node.js。可以从 Node.js 官网 下载并安装适合操作系统的版本。安装完成后，可以通过以下命令检查是否安装成功：

node -v
npm -v

创建Next.js项目

使用 npx 命令可以快速创建一个新的 Next.js 项目。在终端中运行以下命令：

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

其中 my-next-app 是项目名称，可以根据需要修改。该命令会自动生成一个基本的 Next.js 项目结构。

启动开发服务器

进入项目目录并启动开发服务器：

cd my-next-app
npm run dev

默认情况下，Next.js 开发服务器会运行在 http://localhost:3000。打开浏览器访问该地址，可以看到 Next.js 的默认欢迎页面。

配置项目

Next.js 提供了灵活的配置选项，可以通过修改 next.config.js 文件来定制项目行为。例如，可以配置环境变量、自定义 Webpack 配置、设置静态资源路径等。

// next.config.js
module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'],
  },
};

添加页面和路由

Next.js 使用文件系统作为路由系统。在 pages 目录下创建的文件会自动映射为路由。例如，创建 pages/about.js 文件后，可以通过 http://localhost:3000/about 访问该页面。

// pages/about.js
export default function About() {
  return <div>About Page</div>;
}

部署项目

Next.js 项目可以部署到多种平台，如 Vercel、Netlify 或自定义服务器。使用 Vercel 部署是最简单的方式，只需将项目推送到 GitHub 仓库，然后在 Vercel 中导入该仓库即可自动部署。

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/my-next-app.git
git push -u origin main

优化和扩展

Next.js 提供了许多内置功能，如静态生成（SSG）、服务器端渲染（SSR）、API 路由等。可以根据项目需求选择合适的功能进行扩展。例如，使用 getStaticProps 和 getStaticPaths 实现静态生成，或使用 getServerSideProps 实现服务器端渲染。

// pages/posts/[id].js
export async function getStaticPaths() {
  const paths = await fetch('https://api.example.com/posts').then(res => res.json());
  return {
    paths: paths.map(post => ({ params: { id: post.id } })),
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.id}`).then(res => res.json());
  return {
    props: {
      post,
    },
  };
}

export default function Post({ post }) {
  return <div>{post.title}</div>;
}

通过以上步骤，可以完成 Next.js 的安装、配置和基本使用。根据项目需求，可以进一步探索 Next.js 的高级功能和优化策略。