Nextjs是什么

Nextjs 是什么

Next.js 是一个开源的 JavaScript 框架，用于构建服务器端渲染和静态网站。它是基于 React 库开发的

服务器端渲染（SSR）：传统的 React 应用是在浏览器中渲染的，而 Next.js 允许在服务器上渲染页面。这可以提高首次加载速度，并对搜索引擎优化（SEO）非常有利。
静态网站生成（SSG）：Next.js 还支持预渲染页面，这意味着在构建时生成页面的静态文件。这些静态页面可以非常快速地提供给用户，同时减少服务器的负载。
文件系统路由：在 Next.js 中，可以通过在 pages 目录中添加文件来创建路由，这简化了路由的设置过程。
API 路由：Next.js 允许你在同一个项目中构建前端和 API 端点，使得全栈开发更加方便。
易于部署：Next.js 应用可以轻松地部署到多种托管平台，如 Vercel（由 Next.js 的开发团队创建）和其他云平台。
社区和生态系统：作为一个流行的框架，Next.js 拥有一个活跃的社区和丰富的插件生态系统，有助于解决开发过程中的各种问题。

快速了解项目结构

以下是一些 Next.js 的基础概念以及一个典型的 Next.js 项目目录结构示例：

页面（Pages）

Next.js 应用的核心概念之一是页面。页面是存放 React 组件的特殊目录，每个页面文件对应一个路由。

示例目录结构：

/pages
  /index.js         // 根路径的页面
  /about.js         // /about 路由的页面
  /contact.js       // /contact 路由的页面

Next.js 的路由系统是基于文件系统的，不需要额外配置。例如，访问 / 就会加载 index.js 中定义的组件，而访问 /about 就会加载 about.js 中定义的组件。

也可以使用 Link 组件或 useRouter 钩子来处理路由导航。

import Link from 'next/link';

// 在组件中使用 Link
<Link href="/about">
  <a>About</a>
</Link>

共享组件

在 Next.js 中，你可以创建共享组件，它们可以在不同页面之间重复使用。示例目录结构：

/components
  /Header.js        // 共享的页眉组件
  /Footer.js        // 共享的页脚组件

静态文件

Next.js 支持在项目中存储静态文件，如图像、样式表和脚本。

/public
  /images
    /logo.png       // 存放图像文件
  /styles
    /main.css       // 存放样式文件

API 路由

Next.js 允许你创建 API 路由，用于处理服务器端请求。

/pages
  /api
    /user.js        // 处理用户相关请求的 API 路由

页面的数据获取

数据获取是指在 Next.js 中获取数据并将其传递给页面组件以供渲染。Next.js 提供了不同的数据获取方式，以满足不同的需求，包括服务器端渲染（Server-Side Rendering，SSR）、静态生成（Static Generation，SG）以及客户端渲染（Client-Side Rendering，CSR）。这些方法可以让你在页面加载之前或之后获取数据，以确保页面在呈现时具有所需的数据。

以下是一些常见的数据获取方法：

以下是使用 Next.js 的不同数据获取方法的简单示例：

使用 `getServerSideProps` 获取数据

假设你有一个需要在每个请求时获取动态数据的页面，比如一个博客文章详情页。你可以这样使用 getServerSideProps：

// pages/post/[id].js

import { useRouter } from 'next/router';

function Post({ post }) {
  const router = useRouter();

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  const { id } = context.query;

  // 从数据库或外部 API 获取数据
  const response = await fetch(`https://api.example.com/posts/${id}`);
  const post = await response.json();

  // 将数据作为 props 传递给组件
  return {
    props: {
      post,
    },
  };
}

export default Post;

在上面的例子中，getServerSideProps 用于在服务器端获取博客文章的数据，并将其作为 post 属性传递给 Post 组件。

使用 `getStaticProps` 和 `getStaticPaths` 静态生成页面

假设你有一个博客，希望根据博客文章的 ID 生成静态页面。你可以这样使用 getStaticProps 和 getStaticPaths：

// pages/post/[id].js

import { useRouter } from 'next/router';

function Post({ post }) {
  const router = useRouter();

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export async function getStaticPaths() {
  // 获取所有博客文章的 ID
  const response = await fetch('https://api.example.com/posts');
  const posts = await response.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  // 返回需要生成静态页面的路径
  return {
    paths,
    fallback: false, // 设置为 false 表示只生成已知的路径
  };
}

export async function getStaticProps({ params }) {
  const { id } = params;

  // 从数据库或外部 API 获取数据
  const response = await fetch(`https://api.example.com/posts/${id}`);
  const post = await response.json();

  // 将数据作为 props 传递给组件
  return {
    props: {
      post,
    },
  };
}

export default Post;

在上面的例子中，getStaticPaths 用于指定需要生成静态页面的路径，而 getStaticProps 用于在构建时获取每个页面的数据。

References

官方文档