Làm quen với Next.js cho người mới bắt đầu (P3)

getStaticPaths:

Nếu một trang có định tuyến động và sử dụng getStaticProps, nó cần xác định danh sách các đường dẫn sẽ được tạo tĩnh. Khi bạn sử dụng chức năng getStaticPaths(Tạo trang web tĩnh) từ một trang động thì Next.js sẽ hiển thị trước tất cả các đường dẫn được chỉ định bởi tĩnh getStaticPaths.

    export async function getStaticPaths() {
      return {
        paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
        fallback: false, // can also be true or 'blocking'
      }
    }
    export async function getStaticProps(context) {
      return {
        props: { post: {} },
      }
    }
    export default function Post({ post }) {
    }

Khi nào getStaticPaths chạy?: getStaticPathssẽ chỉ chạy trong quá trình xây dựng, nó sẽ không được gọi trong thời gian chạy.

Tạo đường dẫn theo yêu cầu:

getStaticPathscho phép bạn kiểm soát những trang nào được tạo trong quá trình xây dựng thay vì theo yêu cầu với fallback. Bởi vì, việc tạo nhiều trang hơn trong quá trình xây dựng sẽ gây ra sự chậm trễ.

Ngoài ra, bạn có thể trì hoãn việc tạo tất cả các trang theo yêu cầu bằng cách trả về mảng trống cho path. Ví dụ, bạn có thể xây dựng nhanh các trang bằng cách tạo tất cả các trang theo yêu cầu để xem trước:

    export async function getStaticPaths() {

      if (process.env.SKIP_BUILD_STATIC_GENERATION) {
        return {
          paths: [],
          fallback: 'blocking',
        }
      }

      const posts = await res.json()

        params: { id: post.id },
      }))

      return { paths, fallback: false }
    }