Skip to content

Commit 5834ff6

Browse files
author
Fergus Bisset
committed
feat(nextjs): add NHSBehavioursInit client initializer and update Header docs\n\n- Export NHSBehavioursInit from /nextjs and recommend it for Next.js apps\n- Deprecate InitBehaviours and InitBehavioursInline (forward to NHSBehavioursInit)\n- Update README and NEXTJS-QUICK-START.md to use the client island pattern\n- Add Header docs snippet linking to Next.js setup\n\nThis simplifies progressive enhancement in Next.js and avoids brittle inline dynamic imports.
1 parent 2775f66 commit 5834ff6

21 files changed

+1333
-1183
lines changed

‎README.md‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -103,39 +103,38 @@ function App() {
103103

104104
## 🚨 Critical: Next.js Setup
105105

106-
**If you're using this design system in Next.js, you MUST load the behaviour script** for progressive enhancement features to work (interactive headers, character counts, conditional reveals, etc.).
106+
Interactive components (Header overflow, CharacterCount, etc.) require the behaviour bundle to run on the client. Keep your root layout as a Server Component and add a tiny client-only initializer.
107107

108-
### Quick Setup
109-
110-
Add one import at the top of your root layout:
108+
### Quick Setup (recommended)
111109

112110
```tsx
113-
// app/layout.tsx
114-
import '@fergusbisset/nhs-fdp-design-system/behaviours' // ← Add this line!
115-
import { Header } from '@fergusbisset/nhs-fdp-design-system/ssr'
116-
import '@fergusbisset/nhs-fdp-design-system/dist/nhs-fdp-design-system.css'
111+
// app/layout.tsx (Server Component)
112+
import '@fergusbisset/nhs-fdp-design-system/dist/nhs-fdp-design-system.css';
113+
import { HeaderServer } from '@fergusbisset/nhs-fdp-design-system/ssr';
114+
import { NHSBehavioursInit } from '@fergusbisset/nhs-fdp-design-system/nextjs';
117115

118-
export default function RootLayout({ children }) {
116+
export default function RootLayout({ children }: { children: React.ReactNode }) {
119117
return (
120118
<html lang="en">
121119
<body>
122-
<Header {/* your header props */} />
120+
<NHSBehavioursInit /> {/* client island ensures behaviours are bundled and initialised */}
121+
<HeaderServer serviceName="Service" navigation={{ items: [ { href: '/', text: 'Home' } ] }} />
123122
{children}
124123
</body>
125124
</html>
126-
)
125+
);
127126
}
128127
```
129128

130-
**That's it!** The behaviours module has auto-initialization code that runs on import.
129+
Why this works:
130+
- Your layout stays server-rendered (no "use client").
131+
- NHSBehavioursInit runs only on the client and imports the behaviours bundle so the Header can enhance.
131132

132-
**Without this**, components like `HeaderServer` will render but won't be interactive (no overflow menus, no keyboard navigation, no transitions).
133-
134-
📖 **[Complete Next.js Setup Guide](./docs/NEXTJS-QUICK-START.md)** - Detailed setup, verification, and troubleshooting
133+
📖 **[Complete Next.js Setup Guide](./docs/NEXTJS-QUICK-START.md)** – Detailed setup, verification, and troubleshooting
135134

136135
## Project Structure
137136

138-
```
137+
```text
139138
nhs-fdp-design-system/
140139
├── docs/ # Documentation
141140
│ ├── components/ # Component guides

‎dist/SkipLink-BE-cc-Aq.js‎

Lines changed: 183 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/SkipLink-BE-cc-Aq.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/SkipLink-D44GdWV3.js‎

Lines changed: 66 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/SkipLink-D44GdWV3.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)