😍generateStaticParams, 3 cách tạo phân đoạn động Single, Multiple, Catch-all (ok)

https://www.geeksforgeeks.org/next-js-functions-generatestaticparams/

Example 1

.env

NEXT_PUBLIC_NODE_ENV=development

next.config.ts

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  assetPrefix:
    process.env.NEXT_PUBLIC_NODE_ENV === "development"
      ? undefined
      : "/generateStaticParams",
  basePath:
    process.env.NEXT_PUBLIC_NODE_ENV === "development"
      ? undefined
      : "/generateStaticParams",
};
export default nextConfig;
/**
    assetPrefix: "/out",
    basePath: "/out",  USE THIS WHEN BUILDING THE STATIC PAGE and publish it to github pages, the path will start with /out
*/

app\posts\page.tsx

import Link from "next/link";
import type { Post } from "@/types/PostProps";
export default async function PostPage() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts: Post[] = await response.json();
  return (
    <div className="min-h-screen bg-gray-100">
      <header className="bg-white shadow">
        <div className="container mx-auto flex flex-col gap-1 px-4 py-6">
          <h1 className="text-2xl font-bold text-gray-800">
            Posts Title and Body
          </h1>
          <Link href="/" className="text-blue-600 hover:underline">
            Back to home
          </Link>
          <Link
            className="text-black hover:underline"
            target="_blank"
            href="https://github.com/gabriel-logan/generateStaticParams-nextjs14"
          >
            Back to github
          </Link>
        </div>
      </header>
      <main className="container mx-auto px-4 py-6">
        {posts.length > 0 ? (
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            {posts.map((post: any) => (
              <Link
                href={`/posts/${post.id}`}
                key={post.id}
                className="rounded-lg bg-white p-6 shadow transition-transform hover:scale-110 active:scale-100"
              >
                <h2 className="text-lg font-bold text-gray-800">
                  PostId: {post.id} - {post.title}
                </h2>
                <p className="text-gray-700">{post.body}</p>
              </Link>
            ))}
          </div>
        ) : (
          <p className="text-gray-700">No posts found.</p>
        )}
      </main>
      <footer className="bg-gray-200">
        <div className="container mx-auto px-4 py-6">
          <p className="text-center text-gray-600">
            © 2022 Your Website. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  );
}

app\posts[postId]\page.tsx

import Link from "next/link";
import type { Post } from "@/types/PostProps";
export async function generateStaticParams() {
  const posts: Post[] = await fetch(
    "https://jsonplaceholder.typicode.com/posts",
  ).then((res) => res.json());
  return posts.map((post) => {
    return {
      postId: post.id.toString(),
    };
  });
}
export default async function PostIdPage({
  params,
}: {
  params: { postId: string };
}) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.postId}`,
  );
  const post: Post = await response.json();
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-100 px-2 sm:px-0">
      <div className="w-full rounded bg-white p-10 shadow-lg sm:w-1/2">
        <h1 className="mb-4 text-2xl font-bold text-blue-600 sm:text-3xl">
          PostId: {post.id} - {post.title}
        </h1>
        <p className="text-sm text-gray-700 sm:text-base md:text-lg">
          {post.body}
        </p>
      </div>
      <Link className="mt-4 text-black hover:text-blue-500" href="/posts">
        Go Back
      </Link>
    </div>
  );
}

src\types\PostProps\index.ts

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

Example 2

app\blog[slug]\page.tsx

type P = {
  "userId": number,
  "id": number,
  "title": string,
  "body": string
}
export async function generateStaticParams() {
  const product = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await product.json();
  return posts.map((i:P) => ({
    slug: i.id.toString(),
  }))
}
/* eslint-disable @typescript-eslint/no-explicit-any */
export default async function BlogPost({ params }: { params: any }) {
  const { slug } = await params;
  const data1 = await fetch(`https://jsonplaceholder.typicode.com/posts/${slug}`)
  const udata = await data1.json();
  return (
    <div>
      <h1>Blog Post</h1>
      <div>
        <h1>{udata.title}</h1>
        <div>{udata.body}</div>
      </div>
    </div>
  );
}

Ta thấy nó xây dựng ra file tĩnh để sử dụng

"generateStaticParams " được sử dụng làm trình giữ chỗ trong bối cảnh phát triển NextJS. Nó không đại diện cho một hàm tích hợp hoặc chuẩn trong chính NextJS. Thay vào đó, nó có vẻ là một tên hàm giả định có thể được sử dụng để minh họa quá trình tạo tham số tĩnh trong ứng dụng NextJS.

Hàm generateStaticParams cho phép tạo tuyến tĩnh trong quá trình xây dựng, khi được sử dụng cùng với các phân đoạn tuyến động, thay vì tạo chúng theo yêu cầu.

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
// using the `params` returned by `generateStaticParams`
export default function Page({ params }) {
  const { slug } = params
  // ...
}

Các tham số

• Khi nhiều phân đoạn động trong một tuyến đường sử dụng generateStaticParams, hàm generateStaticParams con sẽ được kích hoạt cho mỗi tập hợp tham số do hàm parent tạo ra.

• Đối tượng params chứa các tham số đã điền từ đối tượng cha generateStaticParams, cho phép sử dụng chúng để tạo tham số trong phân đoạn con.

Kiểu trả về

• generateStaticParams cần trả về danh sách các mục. Mỗi mục trong danh sách phải đại diện cho một phần động của tuyến đường đã được điền dữ liệu.

• Trong mỗi mục, phải có một phần biểu thị tên của phân đoạn động và một phần khác chứa giá trị thực để điền vào phân đoạn đó.

Single Dynamic Segment

export function generateStaticParams() {
  return [{ id: 'a' }, { id: 'b' }, { id: 'c' }]
}
export default function Page({ params }: { params: { id: string } }) {
  const { id } = params
}

Trong ví dụ này, tuyến đường là app/student/[id]/page.tsx, có một phân đoạn động duy nhất [id]. Hàm generateStaticParams cung cấp một mảng với ba đối tượng, mỗi đối tượng chứa một giá trị id khác nhau. Do đó, ba phiên bản của trang này sẽ được tạo tĩnh, có thể truy cập thông qua các URL /student/1, /student/2 và /student/3. Trong thành phần Page, id được lấy từ đối tượng params, tạo điều kiện thuận lợi cho việc sử dụng đối tượng này để xử lý thêm.

Multiple Dynamic Segments

export function generateStaticParams() {
  return [
    { name: 'a', subject: 'english' },
    { name: 'b', subject: 'hindi' },
    { name: 'c', subject: 'maths' },
  ]
}
export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  const { category, product } = params
  // ...
}

Trong kịch bản này, tuyến đường là app/student/[name]/[subject]/page.tsx, bao gồm hai phân đoạn động [name] và [subject]. Hàm generateStaticParams trả về một mảng các đối tượng, mỗi đối tượng chỉ định các kết hợp khác nhau của name và subject. Do đó, ba phiên bản của trang này sẽ được tạo tĩnh, có thể truy cập thông qua các URL như /student/a/english, /student/b/hindi và /student/c/maths. Bên trong thành phần Page, đối tượng params phải chứa các thuộc tính cho cả name và subject, cho phép chúng ta trích xuất và sử dụng các giá trị này để xử lý thêm.

Catch-all Dynamic Segment

export function generateStaticParams() {
  return [{ slug: ['a', 'english'] }, { slug: ['b', 'hindi] }, { slug: ['c', 'maths'] }]
}
export default function Page({ params }: { params: { slug: string[] } }) {
  const { slug } = params
  // ...
}

Trong ví dụ này, tuyến đường là app/student/[...slug]/page.tsx, có đoạn động catch-all [...slug], cho phép độ dài đường dẫn thay đổi. Hàm generateStaticParams trả về một mảng các đối tượng, mỗi đối tượng chứa một mảng trong thuộc tính slug, biểu diễn các kết hợp giá trị khác nhau. Do đó, nhiều phiên bản của trang này sẽ được tạo tĩnh, với các URL như /student/a/english, /student/b/hindi và /student/c/maths. Bên trong thành phần Page, đối tượng params bao gồm một mảng slug, cho phép chúng ta truy cập và sử dụng các đoạn đường dẫn thay đổi để xử lý thêm.

Generate params from the bottom up

export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())
 
  return products.map((product) => ({
    category: product.category.slug,
    product: product.id,
  }))
}
export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  // ...
}

Các phân đoạn động bắt đầu từ phân đoạn tuyến con và di chuyển về phía phân đoạn tuyến cha.

Ví dụ, trong tuyến app/products/[category]/[product]/page.tsx, chúng ta muốn tạo tham số cho cả [category] và [product]. Để thực hiện điều này, chúng ta sử dụng hàm generateStaticParams.

Hàm này lấy dữ liệu sản phẩm không đồng bộ từ API và ánh xạ từng sản phẩm vào một đối tượng chứa danh mục và thuộc tính sản phẩm. Các thuộc tính này biểu diễn các phân đoạn động sẽ điền vào tuyến đường.

Bên trong thành phần Trang, chúng ta nhận danh mục và sản phẩm dưới dạng tham số từ đối tượng params, cho phép chúng ta sử dụng chúng để hiển thị nội dung liên quan đến các sản phẩm và danh mục sản phẩm cụ thể.

Generate params from the top down:

export async function generateStaticParams({
  params: { category },
}: {
  params: { category: string }
}) {
  const products = await fetch(
    `https://.../products?category=${category}`
  ).then((res) => res.json())
 
  return products.map((product) => ({
    product: product.id,
  }))
}
export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  // ...
}

Tạo tham số từ trên xuống có nghĩa là trước tiên phải tạo phân đoạn tuyến cha, sau đó sử dụng phân đoạn này để tạo phân đoạn tuyến con.

Ví dụ, hãy xem xét tuyến đường app/products/[category]/layout.tsx. Ở đây, chúng ta muốn tạo tham số cho phân đoạn [category]. Hàm generateStaticParams sẽ lấy dữ liệu sản phẩm và tạo đối tượng cho từng sản phẩm có danh mục của sản phẩm đó.

Trong thành phần Layout, chúng ta nhận được danh mục dưới dạng tham số từ đối tượng params. Điều này cho phép chúng ta hiển thị nội dung cụ thể cho danh mục sản phẩm.

Trong phân đoạn tuyến con app/products/[category]/[product]/page.tsx, hàm generateStaticParams chạy cho từng danh mục do cha tạo. Nó lấy dữ liệu sản phẩm dựa trên danh mục nhận được từ cha.

Kết quả là, thành phần Trang lấy cả tham số danh mục và sản phẩm từ đối tượng params, giúp chúng ta hiển thị nội dung cho các sản phẩm cụ thể trong danh mục tương ứng của chúng.

Generate only a subset of params

export const dynamicParams = false;
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
  const topPosts = posts.slice(0, 10);
  return topPosts.map((post) => ({
    slug: post.slug,
  }))
}

Chỉ tạo một tập hợp con các tham số cho một tuyến đường liên quan đến việc trả về một mảng các đối tượng có các phân đoạn động cụ thể. Bằng cách sử dụng tùy chọn cấu hình phân đoạn dynamicParams, bạn có thể quản lý những gì xảy ra khi một phân đoạn động được truy cập mà không được tạo bằng generateStaticParams.

Ví dụ, trong tuyến app/blog/[slug]/page.js, chúng tôi giới hạn các tham số để chỉ hiển thị 10 bài đăng hàng đầu. Chúng tôi đặt dynamicParams thành false, cho biết bất kỳ phân đoạn động nào vượt quá 10 bài đăng hàng đầu sẽ dẫn đến lỗi 404.

Hàm generateStaticParams lấy các bài đăng và chọn 10 bài đăng hàng đầu. Sau đó, nó tạo một mảng các đối tượng, mỗi đối tượng chứa slug của một bài đăng. Mảng này đóng vai trò là tập hợp con của các tham số cho tuyến đường.

Do đó, chỉ có 10 bài đăng hàng đầu mới có trang được tạo động, trong khi truy cập các bài đăng khác sẽ dẫn đến lỗi 404.

Mục đích

• Next.js cho phép bạn tạo các trang tĩnh tại thời điểm xây dựng bằng cách sử dụng dữ liệu từ các nguồn bên ngoài như API hoặc cơ sở dữ liệu.

• Tạo dữ liệu tĩnh giúp cải thiện hiệu suất bằng cách hiển thị trước các trang có dữ liệu không thay đổi thường xuyên.

Đường dẫn tĩnh

• Khi ứng dụng Next.js được xây dựng, nó cần biết những trang nào sẽ được tạo tĩnh.

• Hàm getStaticPaths được sử dụng để xác định danh sách các đường dẫn sẽ được tạo tĩnh dựa trên dữ liệu động.

• Mỗi đường dẫn có thể bao gồm các tham số, cho phép tạo nội dung động.

Tuyến đường động

• Next.js hỗ trợ các tuyến động, trong đó các phần của URL được coi là tham số.

• Ví dụ, trong /posts/[id], [id] là tham số biểu thị giá trị động.

• Bằng cách tạo đường dẫn tĩnh với các tham số, Next.js có thể hiển thị trước các trang cho tất cả các giá trị tham số có thể.

Lấy dữ liệu

• Sau khi các đường dẫn tĩnh được xác định, Next.js cần tìm nạp dữ liệu cho từng đường dẫn để hiển thị trước các trang.

• Hàm getStaticProps được sử dụng để lấy dữ liệu cho một đường dẫn cụ thể dựa trên các tham số của nó.

• Hàm này chạy tại thời điểm xây dựng và nhận các tham số của đường dẫn hiện tại làm đầu vào.

Quá trình kết xuất

• Trong quá trình xây dựng, Next.js sẽ gọi getStaticPaths trước để xác định danh sách đường dẫn cần hiển thị trước.

• Đối với mỗi đường dẫn, nó sẽ gọi getStaticProps để lấy dữ liệu và hiển thị trước trang.

• Các trang được hiển thị trước sẽ được lưu dưới dạng tệp HTML tĩnh, phục vụ cho người dùng để cải thiện hiệu suất.

Chúng ta sẽ làm gì

• Chúng ta sẽ xây dựng một ứng dụng Next.js triển khai định tuyến động cho các bài đăng trên blog. Ban đầu, chúng ta sẽ lấy dữ liệu bài đăng trên blog một cách động từ một API bên ngoài (https://jsonplaceholder.typicode.com/posts). Mỗi bài đăng trên blog sẽ có một slug duy nhất trong URL, chẳng hạn như /blog/[slug], trong đó slug biểu thị ID của bài đăng trên blog. Chúng ta sẽ bắt đầu bằng cách thiết lập định tuyến động để hiển thị nội dung bài đăng trên blog dựa trên tham số slug trong URL.

• Sau khi triển khai định tuyến động thành công, chúng tôi sẽ tối ưu hóa ứng dụng của mình bằng cách sử dụng tạo tham số tĩnh. Điều này bao gồm việc tạo trước các trang cho tất cả các slug bài đăng blog có thể có trong quá trình xây dựng, cải thiện hiệu suất bằng cách phục vụ các trang được hiển thị trước thay vì tìm nạp dữ liệu động trên mỗi yêu cầu.

• Để đạt được điều này, chúng ta sẽ sử dụng các hàm getStaticPaths và getStaticProps của Next.js. Chúng ta sẽ sửa đổi thiết lập định tuyến động hiện có của mình để sử dụng tạo tham số tĩnh, đảm bảo rằng các trang bài đăng trên blog được kết xuất trước tại thời điểm xây dựng. Phương pháp này nâng cao trải nghiệm của người dùng bằng cách giảm thời gian tải và tải máy chủ, tạo ra ứng dụng nhanh hơn và phản hồi tốt hơn.

Bước 1: Khởi tạo dự án NextJS:

npx create-next-app my-next-app

Bước 2: Tạo trang bài đăng trên blog

Bên trong thư mục ứng dụng, tạo một thư mục mới có tên là blog. Sau đó tạo một thư mục mới có tên là [slug] bên trong blog rồi tạo một tệp có tên là page.js

Bước 3: Lấy dữ liệu bài đăng trên blog một cách động:

Với mã này, chúng tôi đã thiết lập các tuyến động cho các bài đăng trên blog. Khi người dùng truy cập một trang, thành phần sẽ lấy dữ liệu từ API bên ngoài để hiển thị bài đăng trên blog tương ứng. Tuy nhiên, mỗi lần trang được tải, nó sẽ kích hoạt một lệnh gọi API mới, dẫn đến các yêu cầu trùng lặp nếu cùng một URL được truy cập nhiều lần. Thêm điều này vào page.js mà bạn đã tạo

Bước 4: Triển khai generateStaticParams:

Để giải quyết vấn đề trên, chúng tôi sẽ triển khai generateStaticParams trong Next.js, một tính năng được gọi là tạo tham số tĩnh. Tính năng này cho phép chúng tôi tạo trước tất cả các trang bài đăng trên blog có thể trong quá trình xây dựng, đảm bảo rằng mỗi trang đều có sẵn mà không cần các lệnh gọi API bổ sung. Bằng cách đó, chúng tôi tối ưu hóa hiệu suất bằng cách phục vụ các trang được kết xuất trước, loại bỏ nhu cầu phải truy cập API mỗi khi người dùng truy cập URL bài đăng trên blog.

app\blog[slug]\page.tsx

export async function generateStaticParams() {
  const product = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await product.json();
  return posts.map((i: any) => ({
    slug: i.id.toString(),
  }))
}
export default async function BlogPost({ params }: { params: any }) {
  const { slug } = params;
  console.log(params.slug)
  const data1 = await fetch(`https://jsonplaceholder.typicode.com/posts/${slug}`)
  const udata = await data1.json();
  return (
    <div>
      <h1>Blog Post</h1>
      <div>
        <h1>{udata.title}</h1>
        <div>{udata.body}</div>
      </div>
    </div>
  );
}

Bước 5: Xây dựng dự án: Chạy lệnh build để tạo bản dựng sản xuất được tối ưu hóa cho dự án Next.js.

npm run build

Bằng cách xây dựng dự án, Next.js tạo ra generateStaticParams tại thời điểm xây dựng, lưu chúng trong thư mục .next. Điều này có nghĩa là các tệp HTML cho mỗi trang bài đăng trên blog được tạo trước trong quá trình xây dựng. Do đó, khi người dùng truy cập trang bài đăng trên blog, nội dung sẽ có sẵn ngay lập tức mà không cần phải gọi API bổ sung. Tối ưu hóa này làm giảm đáng kể thời gian tải và giảm thiểu số lượng yêu cầu API, nâng cao hiệu suất tổng thể và trải nghiệm người dùng của trang web.

Khởi động Máy chủ phát triển:

npm run dev

Next.js Functions: generateStaticParams

Last Updated : 30 Sep, 2024

"generateStaticParams" is a function name or identifier used as a placeholder in the context of NextJS development. It doesn't represent a built-in or standard function in NextJS itself. Instead, it seems to be a hypothetical function name that could be used to illustrate the process of generating static parameters in a NextJS application.

generateStaticParams:

The generateStaticParams function allows for the static generation of routes during the build process, when used alongside dynamic route segments, rather than dynamically generating them upon request."

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// using the `params` returned by `generateStaticParams`
export default function Page({ params }) {
  const { slug } = params
  // ...
}

Parameters

• When multiple dynamic segments in a route utilize generateStaticParams, the child generateStaticParams function is triggered for each set of parameters generated by the parent.

• The params object holds the populated parameters from the parent generateStaticParams, enabling their utilization for generating parameters within a child segment.

Return Type

• generateStaticParams needs to give back a list of items. Each item in the list should represent a dynamic part of the route that's been filled with data.

• In each item, there should be a part that represents the name of the dynamic segment, and another part that holds the actual value to fill in for that segment.

Single Dynamic Segment

export function generateStaticParams() {
  return [{ id: 'a' }, { id: 'b' }, { id: 'c' }]
}
 
export default function Page({ params }: { params: { id: string } }) {
  const { id } = params
}

In this example, the route is `app/student/[id]/page.tsx`, featuring a single dynamic segment `[id]`. The `generateStaticParams` function provides an array with three objects, each containing a different `id` value. Consequently, three versions of this page will be statically generated, accessible via the URLs `/student/1`, `/student/2`, and `/student/3`. Within the `Page` component, the `id` is obtained from the `params` object, facilitating its usage for further processing.

Multiple Dynamic Segments

export function generateStaticParams() {
  return [
    { name: 'a', subject: 'english' },
    { name: 'b', subject: 'hindi' },
    { name: 'c', subject: 'maths' },
  ]
}
 

export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  const { category, product } = params
  // ...
}

In this scenario, the route is app/student/[name]/[subject]/page.tsx, comprising two dynamic segments [name] and [subject]. The generateStaticParams function returns an array of objects, each specifying various combinations of name and subject. As a result, three versions of this page will be statically generated, accessible via URLs like /student/a/english, /student/b/hindi, and /student/c/maths. Inside the Page component, the params object should contain properties for both name and subject, allowing us to extract and utilize these values for further processing.

Catch-all Dynamic Segment

export function generateStaticParams() {
  return [{ slug: ['a', 'english'] }, { slug: ['b', 'hindi] }, { slug: ['c', 'maths'] }]
}
 

export default function Page({ params }: { params: { slug: string[] } }) {
  const { slug } = params
  // ...
}

In this example, the route is `app/student/[...slug]/page.tsx`, featuring a catch-all dynamic segment `[...slug]`, allowing for variable path lengths. The `generateStaticParams` function returns an array of objects, each containing an array within the `slug` property, representing different combinations of values. Consequently, multiple versions of this page will be statically generated, with URLs like `/student/a/english`, `/student/b/hindi`, and `/student/c/maths`. Inside the `Page` component, the `params` object includes an array `slug`, enabling us to access and utilize the variable path segments for further processing.

Generate params from the bottom up

export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())
 
  return products.map((product) => ({
    category: product.category.slug,
    product: product.id,
  }))
}
 
export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  // ...
}

Dynamic segments starting from the child route segment and moving towards the parent route segment.

For example, in the route app/products/[category]/[product]/page.tsx, we want to generate params for both [category] and [product]. To achieve this, we utilize the generateStaticParams function.

This function asynchronously fetches product data from an API and maps each product to an object containing category and product properties. These properties represent dynamic segments that will populate the route.

Inside the Page component, we receive category and product as parameters from the params object, enabling us to use them for rendering content related to specific product categories and products.

Generate params from the top down:

export async function generateStaticParams({
  params: { category },
}: {
  params: { category: string }
}) {
  const products = await fetch(
    `https://.../products?category=${category}`
  ).then((res) => res.json())
 
  return products.map((product) => ({
    product: product.id,
  }))
}
 
export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  // ...
}

Generating params from the top down means first creating the parent route segment and then using it to create the child route segment.

For example, let's consider the route app/products/[category]/layout.tsx. Here, we want to generate parameters for the [category] segment. The generateStaticParams function fetches product data and creates an object for each product with its category.

In the Layout component, we receive the category as a parameter from the params object. This allows us to show content specific to product categories.

In the child route segment app/products/[category]/[product]/page.tsx, the generateStaticParams function runs for each category created by the parent. It fetches product data based on the category received from the parent.

As a result, the Page component gets both category and product parameters from the params object, helping us display content for specific products within their respective categories.

Generate only a subset of params

export const dynamicParams = false
 
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
  const topPosts = posts.slice(0, 10)
 
  return topPosts.map((post) => ({
    slug: post.slug,
  }))
}

Generating only a subset of params for a route involves returning an array of objects with specific dynamic segments. By using the dynamicParams segment config option, you can manage what occurs when a dynamic segment is accessed that wasn't generated with generateStaticParams.

For instance, in the route app/blog/[slug]/page.js, we limit the params to show only the top 10 posts. We set dynamicParams to false, indicating that any dynamic segment beyond the top 10 posts will result in a 404 error.

The generateStaticParams function fetches posts and selects the top 10. It then creates an array of objects, each containing the slug of a post. This array serves as the subset of params for the route.

As a result, only the top 10 posts will have dynamically generated pages, while accessing other posts will lead to a 404 error.

Purpose

• Next.js allows you to generate pages statically at build time using data from external sources like APIs or databases.

• Static generation helps improve performance by pre-rendering pages with data that doesn't change frequently.

Static Paths

• When a Next.js application is built, it needs to know what pages to generate statically.

• The getStaticPaths function is used to define a list of paths that should be statically generated based on dynamic data.

• Each path can include parameters, allowing for dynamic content generation.

Dynamic Routes

• Next.js supports dynamic routes, where parts of the URL are treated as parameters.

• For example, in /posts/[id], [id] is a parameter representing a dynamic value.

• By generating static paths with parameters, Next.js can pre-render pages for all possible parameter values.

Data Fetching

• Once the static paths are defined, Next.js needs to fetch data for each path to pre-render the pages.

• The getStaticProps function is used to fetch data for a specific path based on its parameters.

• This function runs at build time and receives the parameters of the current path as input.

Rendering Process

• During the build process, Next.js first calls getStaticPaths to determine the list of paths to pre-render.

• For each path, it then calls getStaticProps to fetch data and pre-render the page.

• The pre-rendered pages are saved as static HTML files, which are served to users for improved performance.

What we are going to do

• We're going to build a Next.js application that implements dynamic routing for blog posts. Initially, we'll fetch the blog post data dynamically from an external API (https://jsonplaceholder.typicode.com/posts). Each blog post will have a unique slug in the URL, such as /blog/[slug], where the slug represents the ID of the blog post. We'll start by setting up dynamic routing to render the blog post content based on the slug parameter in the URL.

• After successfully implementing dynamic routing, we'll optimize our application by using static parameter generation. This involves pre-generating the pages for all possible blog post slugs during the build process, improving performance by serving pre-rendered pages instead of fetching data dynamically on each request.

• To achieve this, we'll use Next.js's getStaticPaths and getStaticProps functions. We'll modify our existing dynamic routing setup to use static parameter generation, ensuring that the blog post pages are pre-rendered at build time. This approach enhances the user experience by reducing loading times and server load, resulting in a faster and more responsive application.

Step 1: Initialize a NextJS Project:

npx create-next-app my-next-app

Step 2: Create the Blog Post Page

Inside the app directory, create a new directory named blog. and then create a new directory named [slug] inside the blog then create a file as page.js

project structure

Step 3: Fetch Blog Post Data Dynamically:

With this code, we've established dynamic routes for blog posts. When a user visits a page, the component fetches data from an external API to display the corresponding blog post. However, each time the page is loaded, it triggers a new API call, leading to redundant requests if the same URL is accessed repeatedly. Add this in page.js that you have created

JavaScript1

export default async function BlogPost({ params }) {

2

​

3

    const { slug } = params;

4

    console.log(params.slug)

5

    const data1 = await fetch(

6

`https://jsonplaceholder.typicode.com/posts/${params.slug}`)

7

    const udata = await data1.json()

8

​

9

    return (

10

        <div>

11

            <h1>Blog Post</h1>

12

            <div>

13

                <h1>{udata.title}</h1>

14

                <div>{udata.body}</div>

15

            </div>

16

        </div>

17

    );

18

}

Step 4: Implementing generateStaticParams:

To address above issue, we'll implement generateStaticParams in Next.js, a feature known as static parameter generation. This allows us to pre-generate all possible blog post pages during the build process, ensuring that each page is readily available without the need for additional API calls. By doing so, we optimize performance by serving pre-rendered pages, eliminating the need to hit the API every time a user accesses a blog post URL.

JavaScript1

export async function generateStaticParams() {

2

​

3

  const product = await fetch('https://jsonplaceholder.typicode.com/posts');

4

  const posts = await  product.json();

5

  return posts.map((i)=>({

6

        slug : i.id.toString(),

7

    }))

8

9

}

10

​

11

export default async function BlogPost({ params }  ) {

12

​

13

  const { slug } = params;

14

  console.log(params.slug)

15

  const data1 = await fetch(`

16

 https://jsonplaceholder.typicode.com/posts/${params.slug}`)

17

  const udata = await data1.json()

18

19

20

  return (

21

    <div>

22

      <h1>Blog Post</h1>

23

      <div>

24

        <h1>{udata.title}</h1>

25

        <div>{udata.body}</div>

26

      </div>

27

    </div>

28

  );

29

}

Step 5: Build the Project: Run the build command to generate the optimized production build of the Next.js project.

npm run build

By building the project, Next.js generates the generateStaticParams at build time, saving them in the .next folder. This means that the HTML files for each blog post page are pre-generated during the build process. As a result, when a user accesses a blog post page, the content is immediately available without the need for additional API calls. This optimization significantly reduces loading times and minimizes the number of API requests, enhancing the overall performance and user experience of the website.

Start the Development Server:

npm run dev

Output:

final output of the project

Subscribe for 1 Year and get 1 Extra year of access completely FREE! Upgrade to GeeksforGeeks Premium today! Choose GeeksforGeeks Premium and also get access to 50+ Courses with Certifications, Unlimited Article Summarization, 100% Ad free environment, A.I. Bot support in all coding problems, and much more. Go Premium!