How to use getStaticProps in app/ Page component

Question

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.

@antokhio The directory structure is as it was created by create-next-app with --src-dir. Please check it here. I'll go RTFM with hope. — silviubogan
– silviubogan, Commented Apr 11 at 21:16
stackoverflow.com/questions/76570208/… by default next creates app router, getStaticProps is pages router explicitly — antokhio
– antokhio, Commented Apr 11 at 22:05

silviubogan · Accepted Answer · 2025-04-12 01:42:40Z

0

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>;
}

answered Apr 12 at 1:42

silviubogan

3,4753 gold badges38 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use getStaticProps in app/ Page component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related