Next.js 入门指南

Next.js 是一个基于 React 的框架，它扩展了 React 的功能，提供了服务器端渲染（SSR）、静态站点生成（SSG）、文件系统路由、自动代码分割等特性。由于其易用性、高效性以及强大的功能，Next.js 成为了构建生产级别的应用程序的热门选择。

1. 为什么选择 Next.js

• 服务器端渲染：提高首屏加载速度，对SEO友好。
• 静态站点生成：生成静态网站，降低服务器负载，提高性能。
• API 路由：简化API的创建和使用。
• 内置的CSS和SCSS支持：无需额外配置即可使用样式表。
• API 支持：可以轻松创建和消费API。
• 自动代码分割：提高应用性能，减少加载时间。

2. 环境搭建

在开始之前，确保你的开发环境中安装了 Node.js 和 npm（或 yarn）。

安装 Node.js 和 npm

• 访问 Node.js 官网 下载并安装。
• 打开命令行工具，运行 node -v 和 npm -v 检查是否安装成功。

创建 Next.js 应用

使用 create-next-app 创建一个新的 Next.js 应用。

npx create-next-app@latest your-project-name
cd your-project-name

3. 项目结构

Next.js 应用通常具有以下结构：

your-project-name/
|-- node_modules/
|-- public/
|-- pages/
|-- components/
|-- styles/
|-- utils/
|-- package.json
|-- next.config.js
|-- .gitignore

• node_modules/：存放所有依赖。
• public/：存放静态文件，如：robots.txt、favicon.ico。
• pages/：存放React组件，每个文件对应一个路由。
• components/：存放可复用的React组件。
• styles/：存放全局或特定组件的CSS样式。
• utils/：存放工具函数。
• package.json：定义项目的依赖和脚本。
• next.config.js：自定义Next.js的配置。
• .gitignore：定义Git版本控制要忽略的文件。

4. 编写页面

在 pages/ 目录下创建或编辑文件，例如创建一个 index.js 文件：

function Home() {
  return <div>Welcome to Next.js!</div>;
}

export default Home;

每个页面组件默认导出一个React函数组件，并且对应一个路由。

5. 运行开发服务器

在项目根目录下运行以下命令：

npm run dev

这将启动开发服务器，并在默认的 web 浏览器中打开你的应用。

6. 路由

Next.js 提供了基于文件系统的路由系统。每个 .js 或 .jsx 文件代表一个路由。

例如：

• pages/about.js 对应 /about
• pages/blog/[id].js 可以用于动态路由，如 /blog/1

7. 数据获取

Next.js 支持在页面组件中使用 getStaticProps 和 getServerSideProps 来获取数据。

getStaticProps (静态生成)

适用于不会频繁变动的数据。

export async function getStaticProps() {
  const data = await fetch('your-api-endpoint').then(res => res.json());
  return { props: { data } };
}

getServerSideProps (服务器端渲染)

每次服务器渲染页面时都会获取数据。

export async function getServerSideProps() {
  // 同上
}

8. 样式和组件

Next.js 支持多种方式添加样式，包括全局CSS、CSS Modules、styled-components等。

使用全局CSS

在 styles/ 目录下创建CSS文件，并在 _app.js 中全局引入：

// pages/_app.js
import '../styles/global.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

使用CSS Modules

给CSS文件添加 .module.css 后缀，然后在React组件中导入：

// styles/Home.module.css
.title {
  color: red;
}

// pages/index.js
import styles from '../styles/Home.module.css';

function Home() {
  return <h1 className={styles.title}>Welcome to Next.js!</h1>;
}

9. 部署

Next.js 应用可以部署到多种平台，如 Vercel、Netlify、GitHub Pages 等。

部署到 Vercel

Vercel 是由 Next.js 的创造者们提供的，因此部署过程非常便捷。

• 访问 Vercel 官网 并注册账号。
• 连接你的Git仓库。
• 选择你的Next.js项目并部署。

10. 结语

Next.js 是一个功能丰富且易于上手的框架，它极大地简化了构建高性能应用程序的过程。通过本指南，你应该对如何开始使用 Next.js 有了基本的了解。接下来，你可以探索更多的高级特性，如API路由、动态导入、自定义服务器等，以构建更加复杂和强大的应用程序。

11. 资源

• Next.js 官方文档
• Next.js GitHub 仓库

通过不断学习和实践，你将能够充分利用 Next.js 的强大功能，构建出令人印象深刻的应用程序。祝你编程愉快！