Linking a Bootstrap Navbar correctly with nextjs

Question

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.

Where does the error message appear?

Darryl RN
– Darryl RN

2019-08-20 21:08:56 +00:00
Commented Aug 20, 2019 at 21:08 — Darryl RN
– Darryl RN, Commented Aug 20, 2019 at 21:08

Warwick · Accepted Answer · 2020-01-09 07:38:12Z

19

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>

answered Jan 9, 2020 at 7:38

Warwick

4293 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Coda Bool Over a year ago

This will no longer work by default in next v13.x.x However, you can add the legacyBehavior prop to <Link /> and it this will work again. next 13 migration docs: nextjs.org/docs/advanced-features/codemods#new-link

Chris · Accepted Answer · 2023-04-14 13:04:36Z

5

I am on Next.JS 13 and using react-bootstrap v2.7.2 (Bootstrap 5.2) and one solution I found was to use the as property on the Nav.Link. Using the method above was still not rendering correctly for me.

Here is the docs for this method. https://react-bootstrap.github.io/components/navbar/#api

Example usage.

<Nav.Link as={Link} href="/page">Some Page</Nav.Link>

answered Apr 14, 2023 at 13:04

Chris

9319 silver badges18 bronze badges

1 Comment

Valeriy Donika Over a year ago

On mobile the navbar is not closed after I click to the link. Do you know how I can fix it?

Collectives™ on Stack Overflow

Linking a Bootstrap Navbar correctly with nextjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related