Next.js: How to add font-awesome icon and boostrap.min.csss to my proyect?

[chitogamer96]

I have problems in migrate app dashboard react to next js ...

[timneutkens]

You probably have to add next-css. github.com/zeit/next-plugins. Please follow the issue template.

[stahlmanDesign]

Adding FontAwesome v5 doesn't require any special next-plugins. I import FA icons using the library method so you can import icons in one place and then use them in any component. Here's how:

npm install your FontAwesome packages (pro package requires a licence), or manually add them to package.json dependencies and then npm install:

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-brands-svg-icons": "^5.5.0",
    "@fortawesome/free-regular-svg-icons": "^5.5.0",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@fortawesome/pro-light-svg-icons": "^5.5.0",
    "@fortawesome/pro-regular-svg-icons": "^5.5.0",
    "@fortawesome/pro-solid-svg-icons": "^5.5.0",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "module": "^1.2.5",
    "next": "7.0.2",
    "react": "16.6.3",
    "react-dom": "16.6.3"
  },

In head.js:

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'

// NOTE this example only shows how to use the solid free icons.
import {  faCheckSquare, faScrewdriver, faUser } from '@fortawesome/free-solid-svg-icons'
library.add(faCheckSquare, faScrewdriver, faUser)

Then in your modules, such as index.js or pages.js

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
...

<FontAwesomeIcon icon={ ['fas', 'faCheckSquare'] }'/>

<FontAwesomeIcon icon={ ['fas', 'faScrewdriver'] } size='2x'/>

<FontAwesomeIcon icon={ ['fas', 'faUser'] } rotation={ 180 } size='lg'/>

If you have the paid version which allows access to more icons and different varaitions, you will need to add a file to your folder next to package.json with your token:

create an empty file named .npmrc

Its contents should be like this, with your token in place of XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

[JakenHerman]

@stahlmanDesign Where is head.js? Do I need to create this file? If so, should it be in /static?

[stahlmanDesign]

@stahlmanDesign Where is head.js? Do I need to create this file? If so, should it be in /static?

I can't remember how a nextjs project is when you first create it, but I have head.js inside a /components folder which is at the root level (same folder as /node_modules, /pages etc).

[JakenHerman]

@stahlmanDesign oh I see, so this isn't necessarily a file that must be named head.js, I'm guessing? It's just what your header file was named. I gotcha.

[stahlmanDesign]

@stahlmanDesign oh I see, so this isn't necessarily a file that must be named head.js, I'm guessing? It's just what your header file was named. I gotcha.

Yes, the idea is that you want to import the font library in the header file (however it is named) so that it is available on any page (because all pages include the header). If you only want fonts on one page, then you would only need the import on that page.

[dliuproduction]

There's a built-in component to append elements to head in next: https://nextjs.org/docs#populating-head