servicestack-react/examples/nextjs-app-router-setup.tsx at main · ServiceStack/servicestack-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/**
 * Example: Setting up @servicestack/react with Next.js App Router
 *
 * This example shows how to configure the library for use with
 * Next.js 13+ App Router with React 19 SSR support
 */

// File: app/layout.tsx
'use client'

import { setLinkComponent } from '@servicestack/react'
import Link from 'next/link'
import { useEffect } from 'react'
import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  // Configure the library to use Next.js Link on the client side
  useEffect(() => {
    setLinkComponent(Link)
  }, [])

  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// File: app/page.tsx
'use client'

import { PrimaryButton, SecondaryButton, Breadcrumbs, Breadcrumb } from '@servicestack/react'

export default function Home() {
  return (
    <div className="p-8">
      <Breadcrumbs homeHref="/">
        <Breadcrumb>Home</Breadcrumb>
      </Breadcrumbs>

      <h1 className="text-2xl font-bold my-4">Next.js App Router Example</h1>

      {/* These buttons will use Next.js Link component internally */}
      <div className="space-x-2">
        <PrimaryButton href="/">Home</PrimaryButton>
        <SecondaryButton href="/about">About</SecondaryButton>
        <PrimaryButton href="/contact">Contact</PrimaryButton>
      </div>
    </div>
  )
}

// File: app/about/page.tsx
'use client'

import { PrimaryButton, Breadcrumbs, Breadcrumb } from '@servicestack/react'

export default function About() {
  return (
    <div className="p-8">
      <Breadcrumbs homeHref="/">
        <Breadcrumb href="/">Home</Breadcrumb>
        <Breadcrumb>About</Breadcrumb>
      </Breadcrumbs>

      <h1 className="text-2xl font-bold my-4">About Page</h1>
      <PrimaryButton href="/">Back to Home</PrimaryButton>
    </div>
  )
}

// File: app/contact/page.tsx
'use client'

import { PrimaryButton, Breadcrumbs, Breadcrumb } from '@servicestack/react'

export default function Contact() {
  return (
    <div className="p-8">
      <Breadcrumbs homeHref="/">
        <Breadcrumb href="/">Home</Breadcrumb>
        <Breadcrumb>Contact</Breadcrumb>
      </Breadcrumbs>

      <h1 className="text-2xl font-bold my-4">Contact Page</h1>
      <PrimaryButton href="/">Back to Home</PrimaryButton>
    </div>
  )
}