How to implement a section within a route that is defined in Next.JS and not within the `app/[...page]/page.tsx catch all

[cameron_123]

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.

[manish-sharma]

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:

1. 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.

2. Integrate the Header Section in Your Next.js Application:

   • Install the Builder SDK if you haven’t already: npm install @builder.io/react.

3. 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.

4. 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,