# How to get header and footer using next js

**URL:** <https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120>\
**Category:** Technical Questions\
**Tags:** react, shopify, nextjs\
**Created:** [October 6, 2021, 2:29pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120 "2021-10-06T14:29:48Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![iliashaddad](https://avatars.discourse-cdn.com/v4/letter/i/977dab/32.png) [@iliashaddad](https://forum.builder.io/u/iliashaddad)\
**Post date:** [October 6, 2021, 2:29pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/1 "2021-10-06T14:29:48Z")

</div>

Hey,

I have a custom Shopify solution and I’m using [Builder.io](http://Builder.io) for static content like the home page with Next JS.

I used my custom react components only and I want to have a header and footer for other dynamic pages like product and collection.

I converted the header and footer to a symbol from the home page model content. and I managed to edit the symbol but when I want to render it on the page, I got nothing but when I add a simple text. I got it. the issue is with my custom react component doesn’t render on other pages but it does work on the home page.

```auto
// pages/edit-builder-symbol.tsx
import "../components/navigation";
import "../components/footer"
import { BuilderComponent, Builder, builder } from '@builder.io/react'

export default function EditBuilderSymbol() {
  return <BuilderComponent model="symbols" />
}

```

```auto
// pages/product/[product].tsx
import { getProductSlugs, getProduct } from '@lib/shopify'
import getCompany from '@lib/company'
import BuilderConfig from '@config/builder'
import { BuilderComponent, builder } from '@builder.io/react'
import { useRouter } from 'next/router'

import { useState, useEffect } from 'react'
import { Disclosure, RadioGroup, Tab } from '@headlessui/react'
import { StarIcon } from '@heroicons/react/solid'
import { HeartIcon, MinusSmIcon, PlusSmIcon } from '@heroicons/react/outline'
import { CartState, Checkout } from '@lib/useCart'

const BUILDER_API_KEY = 'adbba6bbdfab45c485e182cb63321c25'
builder.init(BUILDER_API_KEY)

export async function getStaticPaths() {
  const productSlugs = await getProductSlugs()

  const paths = productSlugs.map((slug) => {
    const product = String(slug.node.handle)
    return {
      params: { product },
    }
  })

  return {
    paths,
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const productData = await getProduct(params.product)
  const content = await builder.get('symbols').promise()

  console.log(content)

  return {
    props: {
      productData,
      content,
    },
  }
}

const ProductPage = ({ productData, content }) => {

 
  return (
    <div className="bg-white">

      {content && (
        <BuilderComponent
          content={content}
          model="symbols"
        />
      )}
    </div>
  )
}
export default ProductPage

```

---

<div class="post-metadata">

**Author:** ![Dylan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/dylan/32/678_2.png) [@Dylan](https://forum.builder.io/u/Dylan)\
**Post date:** [October 6, 2021, 4:24pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/2 "2021-10-06T16:24:47Z")

</div>

Hey Ilias, given that the issue involves custom components, it’s challenging for me to really suggest anything concrete because I don’t have access to the full breadth of the code that might be involved. I understand that you might not be able to share all of your code but if you could produce a code-sandbox that demonstrates at least the core of your issue it’d be a lot easier to help.

I have a template [here](https://codesandbox.io/s/exciting-leftpad-ipvnk) that you can modify to demonstrate the issue, just swap out the builder API key for your own and make what ever other changes are required to try and render the symbols.

PS: I don’t understand the relevance of `EditBuilderSymbol` in your example above, it doesn’t looks like it’s referred to in the other example.

I think there may be some confusion about what symbols are used for - custom components largely fill the same role, you would use a symbol if you wanted to create a reusable template that’s managed within builder, where as a custom component would be a reusable template that’s managed in your own codebase.

---

<div class="post-metadata">

**Author:** ![iliashaddad](https://avatars.discourse-cdn.com/v4/letter/i/977dab/32.png) [@iliashaddad](https://forum.builder.io/u/iliashaddad)\
**Post date:** [October 6, 2021, 4:46pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/3 "2021-10-06T16:46:12Z")

</div>

Thank you for your quick reply. here’s the sandbox and screenshots to know more about the issue

> **[exciting-leftpad-ipvnk - CodeSandbox](https://codesandbox.io/s/unruffled-noyce-qmjpc?file=%2Fpages%2Fabout.js)**
>
> exciting-leftpad-ipvnk by Dkendal using @builder.io/react, next, react, react-dom

 ![Screenshot 2021-10-06 at 17.43.28](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/0e248a00422caabd5f3b03485a9da51cad3ebb19.png)  
 ![Screenshot 2021-10-06 at 17.42.24](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/b92117ff52f4c75166e073552b1c4c3bd57dd971.png)

In the end result, I would like to get the header and footer from the home page and render it to other pages that I’ll not use [builder.io](http://builder.io) editor

---

<div class="post-metadata">

**Author:** ![Dylan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/dylan/32/678_2.png) [@Dylan](https://forum.builder.io/u/Dylan)\
**Post date:** [October 6, 2021, 5:02pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/4 "2021-10-06T17:02:05Z")

</div>

Okay so as I understand it, you want to have pages that are controlled in code, and would like the render the header and footer within these pages, and have the header and footer be content that’s managed by builder - is that correct?

If that’s the case we have some documentations about this specific use-case [here](https://www.builder.io/c/docs/guides/getting-started-with-models) under the section “Section Models”.

For your example, rather than using a single “symbols” model to manage your headers and footers, try creating two separate models, “header”, and “footer” to manage this content.

In your react code you’d include a BuilderComponent for each model sandwiched around your content:

```auto
import { builder, BuilderComponent } from "@builder.io/react";

builder.init("YJIGb4i01jvw0SRdL5Bt");

export default function IndexPage() {
  return (
    <div>
      <BuilderComponent model="header" />
      Here's some content that's managed in next.js
      <BuilderComponent model="footer" />
    </div>
  );
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/e22172b9fed32c620babc697013c008d6d793462.png)

---

<div class="post-metadata">

**Author:** ![iliashaddad](https://avatars.discourse-cdn.com/v4/letter/i/977dab/32.png) [@iliashaddad](https://forum.builder.io/u/iliashaddad)\
**Post date:** [October 6, 2021, 5:14pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/5 "2021-10-06T17:14:08Z")

</div>

Okay, Great.

I would like to bring my own React component for the header and footer. Add ability to add them to the home page ([builder.io](http://builder.io) page).

I’ll add header and footer model but I want to add my own react components to it.

---

<div class="post-metadata">

**Author:** ![Dylan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/dylan/32/678_2.png) [@Dylan](https://forum.builder.io/u/Dylan)\
**Post date:** [October 6, 2021, 5:42pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/6 "2021-10-06T17:42:28Z")

</div>

(post deleted by author)

---

<div class="post-metadata">

**Author:** ![Dylan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/dylan/32/678_2.png) [@Dylan](https://forum.builder.io/u/Dylan)\
**Post date:** [October 6, 2021, 5:47pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/7 "2021-10-06T17:47:41Z")

</div>

To add custom “header” and “footer” components you can use [custom components](https://www.builder.io/c/docs/custom-react-components).

You would register your header and footer components like:

```auto
import * as React from "react";
import { Builder } from "@builder.io/react";

export const Header = (props) => (
  <div>{"..."}</div>
);

Builder.registerComponent(Header, {
  name: "Header",
});

export const Footer = (props) => (
  <div>{"..."}</div>
);

Builder.registerComponent(Footer, {
  name: "Footer",
});

```

And then just make sure that this file is imported for the side-effect of registering with builder to occur (as explained in that linked documentation).

Your components should then be available in the insert menu if they were registered correctly like in gif [here](https://www.builder.io/c/docs/custom-react-components#using-components):  
If things aren’t working I would check the console for errors and verify that the code where you’re calling `Builder.registerComponent` is being called.

---

<div class="post-metadata">

**Author:** ![iliashaddad](https://avatars.discourse-cdn.com/v4/letter/i/977dab/32.png) [@iliashaddad](https://forum.builder.io/u/iliashaddad)\
**Post date:** [October 6, 2021, 6:02pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/8 "2021-10-06T18:02:16Z")

</div>

it’s already registred but doesn’t show up in the header and footer model and show only in page model

---

<div class="post-metadata">

**Author:** ![Dylan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/dylan/32/678_2.png) [@Dylan](https://forum.builder.io/u/Dylan)\
**Post date:** [October 6, 2021, 6:32pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/9 "2021-10-06T18:32:45Z")

</div>

If you update the code sandbox example or provide a new one I can take a look.

---

<div class="post-metadata">

**Author:** ![iliashaddad](https://avatars.discourse-cdn.com/v4/letter/i/977dab/32.png) [@iliashaddad](https://forum.builder.io/u/iliashaddad)\
**Post date:** [October 6, 2021, 6:45pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/10 "2021-10-06T18:45:05Z")

</div>

I create a header and footer model. I added a new entry but I would like to use my own React components like on the page model.

 ![Screenshot 2021-10-06 at 19.43.55](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/4afb7a8829d79f5b140c457ab23c1292d54cc1d9.png) Home Page  
 ![Screenshot 2021-10-06 at 19.43.07](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/47002fb74a7f51a0934d3695c68d6bd78edfe04c.png) Footer Entry

---

<div class="post-metadata">

**Author:** ![iliashaddad](https://avatars.discourse-cdn.com/v4/letter/i/977dab/32.png) [@iliashaddad](https://forum.builder.io/u/iliashaddad)\
**Post date:** [October 7, 2021, 1:37pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/11 "2021-10-07T13:37:43Z")

</div>

@Dylan I would like to make reusable header and footer with my own react components and I need it very urgent

---

<div class="post-metadata">

**Author:** ![Dylan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/dylan/32/678_2.png) [@Dylan](https://forum.builder.io/u/Dylan)\
**Post date:** [October 7, 2021, 2:35pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/12 "2021-10-07T14:35:46Z")

</div>

Hey Ilias, you’ll have to provide a code sandbox example demonstrating the issue otherwise I can only guess.

---

<div class="post-metadata">

**Author:** ![Dylan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/dylan/32/678_2.png) [@Dylan](https://forum.builder.io/u/Dylan)\
**Post date:** [October 7, 2021, 2:50pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/13 "2021-10-07T14:50:23Z")

</div>

If you’re using a custom component you **do not need to create a model for the header or footer**.

Only create the header and footer models if you’d like to manage that content in builder.

Here is an example where I’m providing my own custom header component:

> **[friendly-worker-875v0 - CodeSandbox](https://codesandbox.io/s/friendly-worker-875v0?file=%2Fpages%2Findex.js)**
>
> friendly-worker-875v0 by Dkendal using @builder.io/react, next, react, react-dom

```auto
import Link from "next/link";

import { builder, Builder, BuilderComponent } from "@builder.io/react";

builder.init("YJIGb4i01jvw0SRdL5Bt");

const Header = () => {
  return <div>{"This is a custom header"}</div>;
};

Builder.registerComponent(Header, {
  name: "Custom Header"
});

export default function IndexPage() {
  return (
    <div>
      Hello World.{" "}
      <Link href="/about">
        <a>About</a>
      </Link>
      <BuilderComponent model="page" url="/" />
    </div>
  );
}

```

This is in codesandbox, I copy and paste the preview link into builder:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/a1a7626622320a4069f6abbe91d90440d3c0bea0.png)

I set the preview url in builder, and I can see that my custom component is available on the left.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/a97454ba8cd7180b1e64f1577a0ea0466a3fa944.png)

Dropping the layer in I can see the text I set from react.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/4489f160ccf1b24bcd0186b0990033e635a0c041.png)

---

<div class="post-metadata">

**Author:** ![iliashaddad](https://avatars.discourse-cdn.com/v4/letter/i/977dab/32.png) [@iliashaddad](https://forum.builder.io/u/iliashaddad)\
**Post date:** [October 7, 2021, 3:16pm UTC](https://forum.builder.io/t/how-to-get-header-and-footer-using-next-js/1120/14 "2021-10-07T15:16:01Z")

</div>

Thank you @Dylan. I managed to get this fixed by importing my custom react components where I render builder component in product page