Question 293694 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Nextjs app directory doesnt not have getStaticPats

I ran into an issue with the new nextjs app router

where i wanted to use SSG pages for stapi blog but was getting this error when building

app/blog/[slug]/page.tsx
Type error: Page "app/blog/[slug]/page.tsx" does not match the required types of a Next.js Page.
  "getStaticPaths" is not a valid Page export field.

for

import { BlogArticlePreview } from "@/components/landingPages/BlogArticles";
import { getBlog, getBlogs } from "@/services/strapi/modules/blog";
import { BlogPage } from "./BlogPage";

const fetchBlog = async (slug: string) => {
  try {
    return await getBlog(slug);
  } catch (error) {
    return null;
  }
};

export const getStaticPaths = async () => {
  const data = await getBlogs();

  const paths = (data as any).data.map((item: any) => {
    return {
      params: { slug: item.attributes.slug },
    };
  });

  return {
    paths,
    fallback: true,
  };
};

export default async function Page({ params }: any) {
  const blog = ((await fetchBlog(params.slug)) as any)
    ?.attributes as unknown as BlogArticlePreview;

  return <BlogPage {...blog} />;
}

enter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Found a way to do so

    Method:

    generateStaticParams

    Example:

    import { BlogArticlePreview } from "@/components/landingPages/BlogArticles";
import { getBlog, getBlogs } from "@/services/strapi/modules/blog";
import { BlogPage } from "./BlogPage";

const fetchBlog = async (slug: string) => {
  try {
    return await getBlog(slug);
  } catch (error) {
    return null;
  }
};

export async function generateStaticParams() {
  const data = await getBlogs();

  return (data as any).data.map((item: any) => {
    return { slug: item.attributes.slug };
  });
}

export default async function Page({ params }: any) {
  const blog = ((await fetchBlog(params.slug)) as any)
    ?.attributes as unknown as BlogArticlePreview;

  return <BlogPage {...blog} />;
}

  2. 0

    Try

    export async function getStaticPaths()
    Login or Signup to reply.
  3. 0

    You are using the App Router which replaced the getStaticPaths with generateStaticParams. Check the migration guide.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search