Next.js 学习指南

Next.js 学习指南

nextjs-learn-cnLearn Next.js 中文教程项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-learn-cn

项目介绍

Next.js 是一个用于生产环境的 React 框架，它提供了构建现代 Web 应用所需的各种功能，包括静态及服务器端渲染、TypeScript 支持、智能捆绑、路由预取等。本项目 nextjs-learn-cn 是一个中文教程，旨在帮助开发者快速上手 Next.js，并深入理解其核心概念和使用方法。

项目快速启动

环境准备

确保你的开发环境中已安装 Node.js（推荐版本 >= 12.0.0）。

克隆项目

git clone https://github.com/qufei1993/nextjs-learn-cn.git
cd nextjs-learn-cn

安装依赖

npm install

启动开发服务器

npm run dev

打开浏览器并访问 http://localhost:3000，你将看到 Next.js 的欢迎页面。

应用案例和最佳实践

静态生成和服务器端渲染

Next.js 支持静态生成（Static Generation）和服务器端渲染（Server-side Rendering）两种预渲染方式。静态生成适用于不经常变化的页面，而服务器端渲染则适用于需要频繁更新的页面。

静态生成示例

// pages/index.js
function HomePage({ posts }) {
  return (
    <div>
      <h1>文章列表</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default HomePage;

服务器端渲染示例

// pages/posts/[id].js
function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default Post;

路由和动态路由

Next.js 内置了基于文件系统的路由系统。pages 目录下的每个文件都对应一个路由。动态路由可以通过在文件名中使用方括号来实现。

动态路由示例

// pages/posts/[id].js
import { useRouter } from 'next/router';

function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <p>文章 ID: {id}</p>;
}

export default Post;

典型生态项目

Next.js 生态系统丰富，有许多优秀的库和工具可以与之配合使用，以下是一些典型的生态项目：

• Tailwind CSS：一个现代的、响应式的 CSS 框架，与 Next.js 结合使用可以快速构建美观的界面。
• Next.js Commerce：一个开箱即用的电商解决方案，集成了多种支付和物流服务。
• MDX：允许你在 Markdown 文件中使用 React 组件，非常适合文档和博客站点。
• NextAuth.js：一个简单易用的身份验证库，支持多种 OAuth 服务和数据库。

通过这些生态项目，你可以进一步扩展 Next.js 的功能，构建更加复杂和强大的应用。

nextjs-learn-cnLearn Next.js 中文教程项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-learn-cn