Como adicionar o Bootstrap ao Next.js

#nextjs #react #javascript

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)

Thiago • May 7 '23

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.