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
Entre no diretório my-app
e siga as instruções da instalação.
cd my-app
Abra um novo terminal, navegue até o diretório my-app
e instale o bootstrap.
npm install bootstrap
ou
yarn add bootstrap
Depois criamos uma página _app.js
no diretório Pages
.
touch pages/_app.js
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;
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)
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.
Fiz todos os passos e o bootstrap ainda continua não funcionando como deveria 😭
Vou refazer os passos, porque aqui funcionou certinho
Tudo que é relácioado ao CSS do Bootstrap funciona. O que não funciona são os componentes que usam o JS.
Entendi cara. Testei outras vezes aqui e funcionou, mas só testei o css. Nesse caso não seria interessante usar o react-bootstrap?
O react-bootstrap nunca testei para ver se funciona.
Só havia testado com o React.js e não com o Next.js
Cara, vê esse artigo, escrevi fazendo passo a passo no React: