Kevin Powell - Community•7mo ago

Trying to use getStaticProps in a layout.js

I am working on an application and I would like to use getStaticProps in a layout .js file of my routing. I keep getting an error that this is not supported but in the documentation they say that it only works in pages but I get the same error if I try to use it in page.js. The project is Next v 13. How can a fix this or are there any alernatives?

15 Replies

dysbulic 🐙•7mo ago

Why is Page a client component? If it wasn't, you can make the Page component async & do the data fetching in the component.

EetJeKomu•7mo ago

I think because a component from page that needs it to be client

dysbulic 🐙•7mo ago

So, you get an error if you remove "use client"? I was thinking you only needed the client directive on the actual component that has to be rendered on the client.

EetJeKomu•7mo ago

Yes I do atleast I think its because of a component

dysbulic 🐙•7mo ago

Can you paste in the error? (I'm still learning the app router & would like to flesh out my understanding a bit.)

EetJeKomu•7mo ago

ReactServerComponentsError:

"getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching

    ╭─[C:\Users\runel\Documents\Odisee\Fase3\ATP\2324_atp_routeyou_1_frontend\src\app\dashboard\my-events\page.js:27:1]
 27 │ import { createdEvents } from "@/services/EventService";
 28 │ import { jsx as _jsx } from "react/jsx-runtime";
 29 │ import { jsxs as _jsxs } from "react/jsx-runtime";
 30 │ export function getStaticProps() {
    ·                 ──────────────
 31 │   return _getStaticProps.apply(this, arguments);
 32 │ }
    ╰────

File path:
./src\app\dashboard\my-events\page.js

ReactServerComponentsError:

"getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching

    ╭─[C:\Users\runel\Documents\Odisee\Fase3\ATP\2324_atp_routeyou_1_frontend\src\app\dashboard\my-events\page.js:27:1]
 27 │ import { createdEvents } from "@/services/EventService";
 28 │ import { jsx as _jsx } from "react/jsx-runtime";
 29 │ import { jsxs as _jsxs } from "react/jsx-runtime";
 30 │ export function getStaticProps() {
    ·                 ──────────────
 31 │   return _getStaticProps.apply(this, arguments);
 32 │ }
    ╰────

File path:
./src\app\dashboard\my-events\page.js

this is the whole error

dysbulic 🐙•7mo ago

Do you get an error when you remove "use client"?

EetJeKomu•7mo ago

yes I get this

ReactServerComponentsError:

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

ReactServerComponentsError:

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

dysbulic 🐙•7mo ago

Do you have "use client" in the child components that use useState? From the docs:

However, "use client" doesn't need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle.

So removing "use client" from Page would make the children server components if they don't have the "use client" boundary. One of them could be throwing the error. Is there a file / line number in the error?

EetJeKomu•7mo ago

"use client";
import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import styles from "./DashboardLink.module.scss";
import Image from "next/image";

export default function DashboardLink({ children, link, icon }) {
  const pathname = usePathname();

"use client";
import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import styles from "./DashboardLink.module.scss";
import Image from "next/image";

export default function DashboardLink({ children, link, icon }) {
  const pathname = usePathname();

its needed in the component for the usePathName I think

dysbulic 🐙•7mo ago

Yes, but you are wanting to load data in the Page component, right? If you can push the "use client" down to the child components, you can remove it from Page, make Page async, and do your data loading directly in the Page component.

EetJeKomu•7mo ago

So you mean I should only place "use client" in the component its needed?

dysbulic 🐙•7mo ago

Yeah. Specifically, don't put it in the Page component. If this is confusing, we could hop on #voice-chat & I'll step you through it.

EetJeKomu•7mo ago

it is a little i'm in voice Thanks alot!

EetJeKomu•7mo ago

SOLVED: We made sure the the components that needed to have '"use client" had it so it could be removed in page.js. Like this the fetch could just be done inside the page component and on the server.

Gaming

Programming

Trying to use getStaticProps in a layout.js