PART 1: Create Header via Partial Design (SXA)

1. Go to Presentation → Partial Designs

Navigate:

/sitecore/content/YourSite/Presentation/Partial Designs

• Create a new Partial Design:
  Header

2. Add Header Rendering

Open the Header Partial Design:

• Click Edit
• Add rendering:
  • Your custom Header Rendering (or SXA Navigation + Image components)

Place it in a placeholder like:

headless-header

If using Image component:

• Click the component
• Click Edit Component Properties
• Select image field or media item

3. Assign Data Source

For your header rendering:

• Set Data Source to:

/sitecore/content/YourSite/Data/Header/Main Header

💡 This keeps your header reusable and centralized.

4. Create a Page Design

Go to:

/sitecore/content/YourSite/Presentation/Page Designs

• Create: Default Page Design

5. Attach Partial Design to Page Design

Inside Page Design:

• Add your Header Partial Design
• Also add:
  • Footer (optional)
  • Main content partial

Now your structure becomes:

Page Design

├── Header (Partial Design)

├── Main Content

└── Footer

6. Assign Page Design to Pages

Go to your page (e.g., Home):

• Open Experience Editor
• Assign:
  👉 Default Page Design

Now header is global across all pages using that design.

7: Save & Publish

Click:

• ✔ Save
• ✔ Publish

PART 2: Headless Layout Output

When using Layout Service:

/sitecore/api/layout/render/jss?item=/&sc_lang=en 

You’ll now see: 

{ 

  "route": { 

    "placeholders": { 

      "header": [ 

        { 

          "componentName": "Header", 

          "fields": { 

            "logo": {...}, 

            "navigationLinks": [...] 

          } 

        } 

      ] 

    } 

  } 

}

Partial Design content is merged automatically into layout output.

PART 3: Next.js Implementation

1. Header Component

const Header = ({ fields }) => { 

  return ( 

    <header className="header"> 

      <img src={fields.logo?.value?.src} alt="logo" /> 

 

      <nav> 

        {fields.navigationLinks?.map((item, i) => ( 

          <a key={i} href={item.url}> 

            {item.title} 

          </a> 

        ))} 

      </nav> 

    </header> 

  ); 

};

2. Register Component

import Header from './components/Header'; 
export const components = { 
  Header, 
}; 

3. Render Header Placeholder

In your main layout:

<Placeholder name="header" rendering={rendering} />

4. PartialDesignDynamicPlaceholder Component

In SXA Headless:

• Partial Designs use dynamic placeholders
• Sitecore injects a system component:

PartialDesignDynamicPlaceholder

But your Next.js app doesn’t have this component registered

Create this file:

/src/components/PartialDesignDynamicPlaceholder.tsx

Add this code:

const PartialDesignDynamicPlaceholder = ({ rendering }: any) => { 

  if (!rendering?.placeholders) return null; 

 

  return Object.keys(rendering.placeholders).map((name) => ( 

    <Placeholder key={name} name={name} rendering={rendering} /> 

  )); 

};

Register Component (VERY IMPORTANT)

Open:

/src/lib/componentFactory.ts 

Add: 

import PartialDesignDynamicPlaceholder from '../components/PartialDesignDynamicPlaceholder'; 
 
export const components = { 
  PartialDesignDynamicPlaceholder, 
};

Name must EXACTLY match:

PartialDesignDynamicPlaceholder

Next.js + Sitecore JSS Project Structure

Here’s a real-world folder structure 👇

/src
├── components
│ ├── Header.tsx
│ ├── Footer.tsx
│
├── lib
│ ├── componentFactory.ts
│
├── Layout.tsx
├── pages
│ ├── [[...path]].tsx
│
├── styles
│ ├── global.css

Header Component

// src/components/Header.tsx 
 
import Link from 'next/link'; 
 
const Header = ({ rendering }) => { 
  const fields = rendering?.fields; 
 
  return ( 
    <header className="header"> 
      <div className="logo"> 
        <img src={fields?.logo?.value?.src} /> 
      </div> 
 
      <nav> 
        {fields?.navigationLinks?.map((item, i) => ( 
          <Link key={i} href={item.url}> 
            {item.title} 
          </Link> 
        ))} 
      </nav> 
    </header> 
  ); 
}; 
 
export default Header;

Layout File

// src/Layout.tsx 
 
import { Placeholder } from '@sitecore-jss/sitecore-jss-nextjs'; 
 
const Layout = ({ layoutData }) => { 
  const { route } = layoutData; 
 
  return ( 
    <> 
      <Placeholder name="headless-header" rendering={route} /> 
      <Placeholder name="main" rendering={route} /> 

      <Placeholder name="headless-footer" rendering={route} /> 
    </> 
  ); 
}; 
 
export default Layout;

Verify Layout Placeholder

Make sure your layout has:

<Placeholder name="headless-header" rendering={route} /> 
<Placeholder name="headless-footer" rendering={route} />

Restart Next.js App

npm run dev

or

yarn dev

or

jss start:connected

WHAT THIS COMPONENT DOES

It dynamically renders nested placeholders like:

"placeholders": { 
  "headless-footer": [ 
    { 
      "componentName": "Container", 
      "placeholders": { 
        "container-1": [...] 
      } 
    } 
  ] 
}

HOW THIS WORKS (IMPORTANT)

Without Partial Design:

• Header added manually to each page

With Partial Design:

• Header injected automatically via Page Design
• Fully reusable and maintainable

KEY BENEFITS

✔ One place to manage header
✔ No duplication
✔ Clean Helix architecture
✔ Works perfectly with Headless + Next.js
✔ Easy personalization later

PRO TIP (Very Important)

If you're using SXA Headless:

• Always use:
  • Partial Design for global UI (Header/Footer)
  • Page Design for structure
  • Data folder for content

FINAL ARCHITECTURE

Data

└── Header Content

Presentation

├── Partial Designs

│ └── Header

│

├── Page Designs

│ └── Default

│

└── Renderings

└── Header Component

FINAL FLOW (SIMPLE)

1. Create Header → Partial Design
2. Attach to Page Design
3. Assign Page Design to pages
4. Layout Service exposes header
5. Next.js renders <Placeholder name="header" />

Common Mistakes (Avoid These)

• Not assigning Page Design
• Missing placeholder (header) in layout
• Component not registered in factory
• Wrong datasource path

Happy Coding!