Como adicionar o Bootstrap ao Next.js
rodrigozan
Posted on May 1, 2023
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.
Posted on May 1, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
