Short question: how do I get per-page static data into a component shared across pages?
I suspect this is simple and I’m just missing a basic pattern — and that may be the question: what is the pattern to do this?
Right now I have pages that may have a hero section, and they get the data for it from the CMS:
<code>// File: app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
</body>
</html>
}
// File: [slug]/page.js
export async function generateStaticParams() {
const pages = await // get page list from CMS
return pages.map({ slug }) => slug;
}
async function getPage(slug) {
const page = await // get page data from CMS
return { page };
}
export default async function Page({ params }) {
const { page } = await getPage(params.slug);
return (
<>
{page?.hero && <Hero {...page.hero} /> }
<Content content={page.content} />
</>
);
}
</code>
<code>// File: app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
</body>
</html>
}
// File: [slug]/page.js
export async function generateStaticParams() {
const pages = await // get page list from CMS
return pages.map({ slug }) => slug;
}
async function getPage(slug) {
const page = await // get page data from CMS
return { page };
}
export default async function Page({ params }) {
const { page } = await getPage(params.slug);
return (
<>
{page?.hero && <Hero {...page.hero} /> }
<Content content={page.content} />
</>
);
}
</code>
// File: app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
</body>
</html>
}
// File: [slug]/page.js
export async function generateStaticParams() {
const pages = await // get page list from CMS
return pages.map({ slug }) => slug;
}
async function getPage(slug) {
const page = await // get page data from CMS
return { page };
}
export default async function Page({ params }) {
const { page } = await getPage(params.slug);
return (
<>
{page?.hero && <Hero {...page.hero} /> }
<Content content={page.content} />
</>
);
}
This works fine, and the Hero component handles presentation differently depending on whether it gets a single image, or collection of images for a slideshow, or a video, etc…
However, I’d now like to migrate the Hero component to be stateful and avoid re-renders across page changes. In particular, I’m doing this because I’m adding the ability to do WebGL animations, and want to handle page transitions seamlessly, and without re-rendering the canvas.
The first thought is to put the Hero in the layout, but AFAICT, there’s no way for a layout.js file to have per-page content.
<code>// File: app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>
<Hero {...page.hero // this isn't a thing, is it? } />
{children}
</body>
</html>
}
</code>
<code>// File: app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>
<Hero {...page.hero // this isn't a thing, is it? } />
{children}
</body>
</html>
}
</code>
// File: app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>
<Hero {...page.hero // this isn't a thing, is it? } />
{children}
</body>
</html>
}
The second thought is, I can put the Hero in the layout, and change the behavior, so it handles the full data query. This is probably right directionally, but a) if the hero content is static, then the whole page should be statically generated; and b) it certainly shouldn’t be making a call to the CMS runtime to get the static data that represents the starting point for a given route.
<code>// File: app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>
<Hero />
{children}
</body>
</html>
}
// File: hero.js
// Even if this would work, it feels gross
'use client';
export function Hero() {
const [heroData, setHeroData] = useState({});
const page = usePathname();
useEffect(() => {
const data = getData(page) //somehow get data from server w/out waiting for CMS
setHeroData(data);
}, [page]);
// do stuff
}
</code>
<code>// File: app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>
<Hero />
{children}
</body>
</html>
}
// File: hero.js
// Even if this would work, it feels gross
'use client';
export function Hero() {
const [heroData, setHeroData] = useState({});
const page = usePathname();
useEffect(() => {
const data = getData(page) //somehow get data from server w/out waiting for CMS
setHeroData(data);
}, [page]);
// do stuff
}
</code>
// File: app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>
<Hero />
{children}
</body>
</html>
}
// File: hero.js
// Even if this would work, it feels gross
'use client';
export function Hero() {
const [heroData, setHeroData] = useState({});
const page = usePathname();
useEffect(() => {
const data = getData(page) //somehow get data from server w/out waiting for CMS
setHeroData(data);
}, [page]);
// do stuff
}
How do I go about getting the per-page static data into a cross-page shared hero component?
You might look into dynamicMetadata API https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata
So you can generate dynamic metadata depending on the incoming params and searchParams (example from Nextjs docs):
<code>import type { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
// read route params
const id = params.id
// fetch data
const product = await fetch(`https://.../${id}`).then((res) => res.json())
// optionally access and extend (rather than replace) parent metadata
const previousImages = (await parent).openGraph?.images || []
return {
title: product.title,
openGraph: {
images: ['/some-specific-page-image.jpg', ...previousImages],
},
}
}
</code>
<code>import type { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
// read route params
const id = params.id
// fetch data
const product = await fetch(`https://.../${id}`).then((res) => res.json())
// optionally access and extend (rather than replace) parent metadata
const previousImages = (await parent).openGraph?.images || []
return {
title: product.title,
openGraph: {
images: ['/some-specific-page-image.jpg', ...previousImages],
},
}
}
</code>
import type { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
// read route params
const id = params.id
// fetch data
const product = await fetch(`https://.../${id}`).then((res) => res.json())
// optionally access and extend (rather than replace) parent metadata
const previousImages = (await parent).openGraph?.images || []
return {
title: product.title,
openGraph: {
images: ['/some-specific-page-image.jpg', ...previousImages],
},
}
}
1