next js getstaticprops-原创手记-慕课网

Next.js 是一个 React 应用程序的服务端渲染(SSR)框架。它允许开发者使用单文件组件(SFCs)来构建动态生成的页面,同时提供了一些高级功能,如静态站点生成和API路由等。在 Next.js 中,静态 site 生成是指将 React 应用程序中的页面静态地生成 HTML 文件,并将其存储在服务器的某个目录下。这些 HTML 文件可以被搜索引擎索引,并且可以在不重新渲染页面的情况下提高页面的加载速度。

静态 site 生成在 Next.js 中可以通过 getStaticProps 方法来实现。该方法会返回一个对象,其中包含了页面所需的所有数据,包括字符串、图像、视频等。这些数据会被静态地生成到页面中,并且在服务端渲染时被传递给 React 应用程序。

下面是一个简单的 getStaticProps 的示例:

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

  return {
    props: {
      posts
    }
  };
}

在这个示例中,我们使用了 fetch 函数来从远程服务器获取数据,然后使用 json 方法将响应转换为 JSON 对象。最后,我们将 JSON 对象作为 props 传递给了组件。

一旦我们有了 getStaticProps 的实现,我们就可以使用它来创建一个静态页面了。下面是一个简单的示例:

import React from 'react';
import { StaticQuery, graphql } from 'next';
import { Link } from 'next/link';

export default function HomePage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h1>{post.title}</h1>
          <p>{post.content}</p>
          <Link href={`/posts/${post.id}`}>
            <a>阅读更多</a>
          </Link>
        </div>
      ))}
    </div>
  );
}

export const query = graphql`
  query($posts: [Post]) {
    allPosts(first: 10, after: null) {
      edges {
        node {
          id
          title
          content
        }
      }
    }
    posts {
      id
      title
      content
    }
  }
`;

在这个示例中,我们使用了 StaticQuery 和 graphql 函数来查询数据。StaticQuery 可以让我们在组件中使用 GraphQL 查询,而不需要重新发送请求到服务器。graphql 函数则提供了用于构建 GraphQL 查询的字符串。

在查询结果中,我们使用了 allPosts 查询来获取最新的 10 个帖子。然后,我们在组件中遍历这些帖子,并将每个帖子的 id、标题和内容都展示出来。我们还添加了一个链接,以便用户可以阅读更多的帖子