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-appEntre no diretório my-app e siga as instruções da instalação.
cd my-appAbra um novo terminal, navegue até o diretório my-app e instale o bootstrap.
npm install bootstrap
ou
yarn add bootstrapDepois criamos uma página _app.js no diretório Pages.
touch pages/_app.jsAdicione 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.
