Question

嘿，我要花几个小时才能用Nextjs设置基本的Bootstrap Navbar。

我还认为除了显示错误消息外，我还有其他问题。

也请让我知道如何使整体效果更好！我应该使用_app.js而不是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;

“关于页面”看起来几乎一样

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。只希望接收一个React元素的孩子。

Answer 1

我正在将React Bootstrap（Firebase Console.）与nextjs一起使用，它节省了大量工作。我将导航栏放在_app.js中，以避免重复代码。如果您使用的是nextjs路由器（就像我一样），则需要像这样包装每个Nav.Link项目：

        <Link href="/index" passHref>
          <Nav.Link>Home</Nav.Link>
        </Link>

将Bootstrap Navbar与Nextjs正确链接

1 个答案: