I am using npx create-next-app to create my NextJs project and now I want to add global style for it by bootstrap

After downloading bootstrap, it suggested me adding global style in pages/_app.js but I found no file like it. Thanks for helping me

I am using npx create-next-app to create my NextJs project and now I want to add global style for it by bootstrap

After downloading bootstrap, it suggested me adding global style in pages/_app.js but I found no file like it. Thanks for helping me

• javascript
• reactjs
• web
• next.js
• frontend

• is your project working without _app.js ? – Bilal Mohammad Commented Sep 6, 2021 at 6:05
• @BilalMohammad yeah, it worked perfectly but I still need add global style =( – Tâm Đỗ Commented Sep 6, 2021 at 6:19
• You should have _app.js in the pages folder. Try running npx create-next-app again? – Surjeet Bhadauriya Commented Sep 6, 2021 at 6:27
• @SurjeetBhadauriya I did but It is not there – Tâm Đỗ Commented Sep 6, 2021 at 6:34
• @TâmĐỗ What's inside of your pages/index.js? Can you show that please? – Surjeet Bhadauriya Commented Sep 6, 2021 at 6:38

3 Answers 3

You create your pages/_app.js, you place code below

import React from 'react';

export default function App({ Component, pageProps }) {
      return (
            <Component {...pageProps} />
      );
    }

To add bootstrap, you create styles folder in /public, you add your .css file of bootstrap (imagine it's bootstrap.css). After, you add import to your app.js file, and the example below:

import React from 'react';
import "../styles/bootstrap.css";

export default function App({ Component, pageProps }) {
      return (
            <Component {...pageProps} />
      );
    }

The possible reason you don't have app.js is because you didn't build your project yet

when you make a new Nextjs project you don't have this file

you should create this file in root pages

_app.js or _app.tsx (if you use typescript)

const MyApp=()=>{
    return(
       enter code here
    )
  }
export default MyApp

Add _document.js file in pages/_document.js, you can add your global style in this file index.jsx see documentation: Custom Document Next.js