I am trying to create a /login
and /register
page which use the same header. I want to be able to create this header in builder.io and then access it within the routes app/register/page.tsx
and app/login/page.tsx
in my NextJS (App Router) frontend.
The problem I seem to be facing is that fetching the “header” data is returning undefined
, screenshot below:
Now this may not be the correct approach as I have just started to use Builder.io, but I want to use code that I have created with the login and register page.tsx
files as it is using react-form-hook
and therefore to complex to embed within a builder.io page itself.
The result of the above screenshotted code is a page with my form code at the bottom and an error (not visible due to styles) taking up the top of the page.
Hello @cameron_123,
To achieve your desired setup where you can create a reusable header in Builder.io and include it in your /login
and /register
pages in your Next.js (App Router) application, you can do the following:
-
Create a Section model for the Header:
- Go to Builder.io, navigate to the Models section, and create a new Section model named something like “Header”.
- You can then use the Builder editor to design your header.
-
Integrate the Header Section in Your Next.js Application:
- Install the Builder SDK if you haven’t already:
npm install @builder.io/react
.
-
Access the Header in Your Page Components:
- You need to set up your
page.tsx
files to fetch and render the header section from Builder.io.
- Use the
BuilderComponent
to render the content of your header section. Here’s a basic example of how you might structure your page.tsx
files:
// app/register/page.tsx or app/login/page.tsx
import { useEffect, useState } from "react";
import { BuilderComponent, builder } from "@builder.io/react";
// Replace with your actual public API key from Builder.io
builder.init('YOUR_API_KEY');
const Page = () => {
const [headerContent, setHeaderContent] = useState(null);
useEffect(() => {
async function fetchHeader() {
const content = await builder
.get('header', {
// Use any targeting attributes needed, or just fetch the latest
})
.promise();
setHeaderContent(content);
}
fetchHeader();
}, []);
return (
<>
{/* Render the Builder.io Header */}
<BuilderComponent model="header" content={headerContent} />
{/* Your custom form component here */}
<YourFormComponent />
</>
);
};
export default Page;
Replace 'header'
with the exact name of your section model and 'YOUR_API_KEY'
with your actual Builder.io public API key.
- Make Sure Your Custom Form Components Render Correctly:
- Ensure your custom form components (
YourFormComponent
in the above code) are included properly and that there are no conflicting styles that might cause display issues.
- Double-check that the error message styles are applied correctly if visibility is an issue.
This setup should allow you to manage a reusable header through Builder.io, while still maintaining the custom form logic in your login and register pages. By using a section model, you’re able to render specific parts of a page, such as a header, while keeping your complex form logic in React components.
Thanks,