Menu
Hey I'm struggling for hours to setup a basic Bootstrap Navbar with Nextjs.
And I also think that I have other Problems than the error message displayed.
Also please let me know how to make this better overall! Should I use _app.js instead of a Layout?
Pages/index.js
import Layout from "../components/Layout";
class Page extends React.Component {
render() {
return (
<Layout>
<div className="container">
<div className="starter text-center">
<h1>Bootstrap starter template</h1>
<p className="lead">
Use this document as a way to quickly start any new project.
<br /> All you get is this text and a mostly barebones HTML
document.
</p>
</div>
</div>
</Layout>
);
}
}
export default Page;
the About Page looks pretty much the same
components/Header.js
import Link from "next/link";
class Header extends React.Component {
render() {
return (
<header>
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
<a className="navbar-brand" href="/">
Home
</a>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarsExampleDefault">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<div>
<Link href="/about">
{" "}
<a className="nav-link">About</a>{" "}
</Link>
</div>
</li>
</ul>
</div>
</nav>
</header>
);
}
}
export default Header;
components/Layout.js
import Head from 'next/head'
import Header from './Header'
import Footer from './Footer'
import bootstrapStyle from 'bootstrap/dist/css/bootstrap.css'
import fontawesomeStyle from 'font-awesome/css/font-awesome.css'
import stylesheet from 'styles/index.scss'
const Layout = ({ children, title }) => (
<div>
<Head>
<title>{ title }</title>
<meta charSet='utf-8' />
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
<style dangerouslySetInnerHTML={{ __html: bootstrapStyle }} />
<style dangerouslySetInnerHTML={{ __html: fontawesomeStyle }} />
<style dangerouslySetInnerHTML={{ __html: stylesheet }} />
</Head>
<Header />
{ children }
<Footer />
</div>
)
export default Layout
React.Children.only expected to receive a single React element child.
932
Now Bootstrap has got even more powerful with Version 5. Adding Bootstrap to your React or a basic HTML file was a simple straight forward task. You run the installation using npm or just add the CDN links in the HTML file. But the process is not that simple when in Next.js. Bootstrap can be added to your Next.js application in two different ways.
If you're using nextjs router (as I am) then you need to wrap each Nav.Link item like so: Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question.
Bootstrap uses some only-client-side objects (window, document) to handle events. On the other hand, Next.js renders the app on both the server-side and client-side. There is no window, document on the server-side thus you can see some error messages like the following: document is not defined windows is not defiend
Along with ant design and chakra-ui, Bootstrap is the most widely used componenet library that you can use to speed up the developpement of your next.js app, giving it a nice professional feel. how to setup Bootstrap 5 Open your terminal window and navigate to the place you want your Next.js project to locate in then running:
I'm using the React Bootstrap (https://react-bootstrap.github.io/) with nextjs and it saves a lot of work. I've put the navbar in _app.js to avoid repeating code. If you're using nextjs router (as I am) then you need to wrap each Nav.Link item like so:
<Link href="/index" passHref>
<Nav.Link>Home</Nav.Link>
</Link>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
