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

**URL:** <https://forum.builder.io/t/how-to-implement-a-section-within-a-route-that-is-defined-in-next-js-and-not-within-the-app-page-page-tsx-catch-all/6708>\
**Category:** Technical Questions\
**Tags:** nextjs\
**Created:** [November 4, 2024, 4:22pm UTC](https://forum.builder.io/t/how-to-implement-a-section-within-a-route-that-is-defined-in-next-js-and-not-within-the-app-page-page-tsx-catch-all/6708 "2024-11-04T16:22:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cameron\_123](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@cameron\_123](https://forum.builder.io/u/cameron_123)\
**Post date:** [November 4, 2024, 4:22pm UTC](https://forum.builder.io/t/how-to-implement-a-section-within-a-route-that-is-defined-in-next-js-and-not-within-the-app-page-page-tsx-catch-all/6708/1 "2024-11-04T16:22:24Z")

</div>

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](http://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:

 ![Screenshot 2024-11-04 at 16.14.50](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/5bb084d2d58f34177ea0086514dffa701fad15a6.png)

Now this may not be the correct approach as I have just started to use [Builder.io](http://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](http://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.

 ![Screenshot 2024-11-04 at 16.17.44](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/be5585db2e844925ba0ce8e5a0c47cffe6e2e695.png)

 ![Screenshot 2024-11-04 at 16.18.18](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/9f645768237bdb70e83682bc3203b780c106d7da.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [November 6, 2024, 10:46am UTC](https://forum.builder.io/t/how-to-implement-a-section-within-a-route-that-is-defined-in-next-js-and-not-within-the-app-page-page-tsx-catch-all/6708/2 "2024-11-06T10:46:36Z")

</div>

Hello @cameron_123,

To achieve your desired setup where you can create a reusable header in [Builder.io](http://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](https://www.builder.io/c/docs/models-sections) for the Header**:

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

3. **Access the Header in Your Page Components** :

```tsx
// 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](http://Builder.io) public API key.

1. **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](http://Builder.io), while still maintaining the custom form logic in your login and register pages. By using a [section model](https://www.builder.io/c/docs/models-sections), you’re able to render specific parts of a page, such as a header, while keeping your complex form logic in React components.

Thanks,