The Problem
<SSRProvider>
React-Bootstrap's <SSRProvider>'s dependency (node_modules/@react-aria/ssr/dist/main.js (46:99)) uses createContext. This means that the server side rendering is either a joke or I am doing something wrong.
My Code
I am using Next.js 13.5.4 with react-bootstrap.
app/layout.tsx
import Navigation from '@/components/Navigation/Navigation';
import SSRProvider from 'react-bootstrap/SSRProvider';
import './globals.scss';
export const metadata = {
title: 'OpenPoultry',
description: 'For straightforward note taking'
};
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<SSRProvider>
<html lang="en">
<body>
<Navigation />
{children}
</body>
</html>
</SSRProvider>
)
}
app/components/Navigation/Navigation.jsx
"use client"
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Link from 'next/link';
function Navigation() {
return (
<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Link href="#home" passHref><Navbar.Brand>React-Bootstrap</Navbar.Brand></Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Link href="#home" passHref><Nav.Link as="span">Home</Nav.Link></Link>
<Link href="#link" passHref><Nav.Link as="span">Link</Nav.Link></Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<Link href="#action/3.1" passHref><NavDropdown.Item as="span">Action</NavDropdown.Item></Link>
<Link href="#action/3.2" passHref><NavDropdown.Item as="span">
Another action
</NavDropdown.Item></Link>
<Link href="#action/3.3" passHref><NavDropdown.Item as="span">Something</NavDropdown.Item></Link>
<NavDropdown.Divider />
<Link href="#action/3.4" passHref={true}><NavDropdown.Item as="span">
Separated link
</NavDropdown.Item></Link>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
export default Navigation;