DEV Community

Cover image for Como adicionar o Bootstrap ao Next.js
rodrigozan
rodrigozan

Posted on • Updated on

Como adicionar o Bootstrap ao Next.js

Neste artigo você aprenderá como adicionar corretamente o Bootstrap ao seu projeto Next.js.

O Bootstrap é um framework front-end de código aberto amplamente utilizado para desenvolvimento de sites e aplicações web responsivas. Ele é projetado para ajudar os desenvolvedores a criar interfaces de usuário mais rapidamente e com menos esforço, fornecendo uma série de componentes pré-construídos, como botões, formulários, menus, tabelas, entre outros.

O framework é baseado em HTML, CSS e JavaScript, e é compatível com os principais navegadores web. Ele utiliza uma grade de 12 colunas para ajudar a criar layouts responsivos e adaptáveis a diferentes tamanhos de tela e dispositivos móveis. Além disso, o Bootstrap também oferece uma ampla variedade de plugins e extensões que podem ser adicionados para estender suas funcionalidades.

Como adicionar o Bootstrap ao Next.js

Primeiro crie um projeto Next.js com npm ou yarn.

npx create-next-app my-app
# ou 
yarn create next-app my-app
Enter fullscreen mode Exit fullscreen mode

Entre no diretório my-app e siga as instruções da instalação.

cd my-app
Enter fullscreen mode Exit fullscreen mode

Abra um novo terminal, navegue até o diretório my-app e instale o bootstrap.

npm install bootstrap 
ou 
yarn add bootstrap
Enter fullscreen mode Exit fullscreen mode

Depois criamos uma página _app.js no diretório Pages.

touch pages/_app.js
Enter fullscreen mode Exit fullscreen mode

Adicione o código a seguir no _app.js. Preste atenção, pois o Bootstrap deve ser importado antes do seu arquivo CSS.


import "bootstrap/dist/css/bootstrap.min.css";
import "../css/customcss.css";
import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

Atente para a tag meta="viewport", responsável pela responsividade da aplicação.

Conclusão

Espero que esse rápido artigo tenha te ajudado a utilizar o Bootstrap no Next.js.

Top comments (7)

Collapse
 
biscoito182 profile image
Thiago

Estava penando com isso. Kkk a versão do next.js 13 dificultou um pouco para os iniciantes usar o bootstrap. Vou testar dessa forma que vc postou aí. Pq eu até conseguia instalar e usar ele mais a responsividade não funcionava direito.

Collapse
 
biscoito182 profile image
Thiago

Fiz todos os passos e o bootstrap ainda continua não funcionando como deveria 😭

Collapse
 
rodrigozan profile image
rodrigozan

Vou refazer os passos, porque aqui funcionou certinho

Thread Thread
 
biscoito182 profile image
Thiago

Tudo que é relácioado ao CSS do Bootstrap funciona. O que não funciona são os componentes que usam o JS.

Thread Thread
 
rodrigozan profile image
rodrigozan

Entendi cara. Testei outras vezes aqui e funcionou, mas só testei o css. Nesse caso não seria interessante usar o react-bootstrap?

Thread Thread
 
biscoito182 profile image
Thiago

O react-bootstrap nunca testei para ver se funciona.
Só havia testado com o React.js e não com o Next.js

Thread Thread
 
rodrigozan profile image
rodrigozan

Cara, vê esse artigo, escrevi fazendo passo a passo no React: