Next.js: how could I use bootstrap.css or other library css in our app

Created on 27 Oct 2016 · 17Comments · Source: vercel/next.js

Source

ckken

Most helpful comment

@tharakabimal here's how I implemented Bootstrap v4 into my project's layout file: https://gist.github.com/gustavlrsn/509694de7f4ee5a5d720d218b21f288e

This is through the reactstrap package (which is bootstrap v4, and CSS file not included), and adding the link to the CSS file from the bootstrap CDN in the <Head> component.

gustavlrsn on 1 May 2017

👍5

All 17 comments

You can use Head component, and implement it on all your pages.

https://github.com/zeit/next.js#head-side-effects

nkzawa on 27 Oct 2016

👍4

fixed it

ckken on 27 Oct 2016

@nkzawa link is no longer working. @ckken how did you fix this?

bestwestern on 19 Apr 2017

@bestwestern the new link -> https://github.com/zeit/next.js#populating-head

sergiodxa on 19 Apr 2017

@ckken Could you kindly tell me how you fixed it?

tharakabimal on 28 Apr 2017

@tharakabimal here's how I implemented Bootstrap v4 into my project's layout file: https://gist.github.com/gustavlrsn/509694de7f4ee5a5d720d218b21f288e

This is through the reactstrap package (which is bootstrap v4, and CSS file not included), and adding the link to the CSS file from the bootstrap CDN in the <Head> component.

gustavlrsn on 1 May 2017

👍5

@ckken Thanks. One quick question. Will this have any effect on code splitting?

tharakabimal on 2 May 2017

@tharakabimal not very well read on how code splitting works in Next.js. However, it will ship the entire CSS file wherever you include that Head component, which might not be ideal as per @rauchg's comment here: https://github.com/zeit/next.js/issues/119#issuecomment-261150085

gustavlrsn on 2 May 2017

👍1

Thanks @gustavlrsn for your answer. I'm testing your setup and getting the following error:

Cannot find module 'react-transition-group/TransitionGroup'

Error: Cannot find module 'react-transition-group/TransitionGroup'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> ([...]/node_modules/reactstrap/lib/Modal.js:27:24)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

My package.json's dependencies are:

  "dependencies": {
    "next": "^2.4.0",
    "react": "^15.5.4",
    "react-addons-css-transition-group": "^15.5.2",
    "react-addons-transition-group": "^15.5.2",
    "react-dom": "^15.5.4",
    "reactstrap": "^4.6.2"
  }

What version of reactstrap are you using?

yemel on 21 May 2017

Fiexed, just needed to install react-transition-group@^1.1.2

yemel on 21 May 2017

👍1

This approach of using the link element to a css file from the Head component gives a FOUC, any ideas how to prevent it?

hugotox on 29 Aug 2017

👍1

@ckken How did you manage to implement the nav bar? I'm having trouble adding Link inside NavLink

 return (
            <div>
                <Navbar color="faded" light expand="md">
                    <NavbarBrand href="/">My Blog</NavbarBrand>
                    <NavbarToggler onClick={this.toggle} />
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className="ml-auto" navbar>
                        <NavItem>
                            <Link href='/about'>
                                <NavLink>About</NavLink>
                            </Link>
                        </NavItem>
                        </Nav>
                    </Collapse>
                </Navbar>
            </div>
        )

tharakabimal on 5 Oct 2017

👍4

Did you got any solution to Navbar implementation?

dacharjaya on 5 Nov 2017

@dacharjaya I decided to write my own CSS (styld jsx) . Not using Bootstrap anymore.

tharakabimal on 6 Nov 2017

I got a solution. You should try this.

import Link from "next/link";
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import NavbarBrand from 'react-bootstrap/lib/NavbarBrand';

dacharjaya on 6 Nov 2017

👍1

@dacharjaya what difference does this make?

tharakabimal on 6 Nov 2017

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.