javascriptreactjsnext.jswebpackstatic-site-generation

How to use getStaticProps in app/ Page component


I think that Page.tsx belongs to app/.

In src/app/Page.tsx, the MRE:

export default function Home({ images: { poze } }: {
  images: {
    poze: string;
  }
}) {
  return poze;
};

export const revalidate = 60;
export const dynamicParams = true;

export const getStaticProps = async () => {
  return {
    props: {
      images: {
        poze: "abc",
      }
    },
  };
};

Expected: "abc" is displayed.

Error:

./src/app/page.tsx
Error:   × "getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching
  │ 
  │ 
    ╭─[/home/silviub/Desktop/Pro/home-gh-pages/src/app/page.tsx:12:1]
  9 │ export const revalidate = 60;
 10 │ export const dynamicParams = true;
 11 │ 
 12 │ export const getStaticProps = async () => {
    ·              ──────────────
 13 │   return {
 14 │     props: {
 15 │       images: {
    ╰────

The link in the error did not help. The original relevant SSG source is here.


Solution

  • This helped me, although I did not find relevant info in the docs.

    Solving the MRE:

    // MyHome.tsx
    import { getString } from "@/lib/string";
    import { Home } from "../components/Home";
    
    export default async function MyHome() {
      const s = await getString();
      return <Home text={s} />;
    }
    
    // Home.tsx
    "use client"; // for useState
    export function Home({ text }) {
      return <h1>{text}</h1>;
    }