Bootstrap X Next.js —
Server-side Static Frameworks
Are you building a new application in React? Stepping up to the plate for the first time with your eyes peeled at the latest features of Next.js?
Wondering how in any to fit hooks with props, balancing SaaS product integrations, connecting APIs, and driving traffic should be your focus — Bootstrap was developed to get you into the environment quickly with products and ideas based around a familiar framework.
Bootstrapping Products
There are many solutions to this point with UI/UX best practices thought through and established, building products has become much more practical with the consideration of modern JavaScript and frontend frameworks to support your serverless backend.
Getting into your ideas is quick with frameworks like Bootstrap, Tailwind, Material UI, AntDesign, and now even Vercel UI. Take the lift out of the design phase with presets that know how to work, so you can focus on the logic — these are some thoughts on how to integrate bootstrap quickly in React & Next.
Integrating Frontends for Performant Systems
Whether you are migrating from a .NET app, Gatbsy framework or even building out from an HTML based static site, you can follow these simple steps to get your content into gear.
Step 1: Choose Bootstrap Imports
Setup Your Bootstrap, JavaScript, and Popper imports from script, these can be deferred and loaded at quite a quick pace and loads from a CDN that will reach around the world.
These are the optimized defaults for Boostrap, though other frameworks, can be loaded similarly, unless they are installed via NPM.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
Step 2: Create Import Paths
As you start coding you should setup your asset imports, whichever file structure you prefer, you can build quick import path references to save you time in building out your page/s.
In your src or root folder create a jsconfig.json file to map the import paths to their initial folders based on the url structure in your project. You can read more about these concepts on the VSCode docs or watch the video tutorial.
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": "./",
"paths": {
"@components/*": ["components/*"]
}
}
}Step 3: Create Your Header
You header will be similar to the head of an HTML document, tags & scripts will required to be self closing to fit JSX syntax, though this component will be imported into your pages to provide outline to the application where in which you would like to load your based content.
Made possible by the Next: Head Component, you can import similarly to how you would in HTML files and it will Server Side Rendered on output.
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPageBootstrap imports should be added at this point, along with the title, and other core meta tags that meet your criteria for what your app initializes. Make sure to check type-check the competent for closing tags to fit JavaScript.
Step 4: Build Your Navbar
In Bootstrap there is a provided Navbar component, to use the method of script imports as mentioned above we need to provide a few adjustments to get this all working out of the box.
Go ahead and convert the ‘class’ from HTML to ‘className’ for JSX. This will allow your Navbar to properly attribute styling from Bootstrap. The form field within the Navbar if you choose, and the hr will need to be self-closing as well.
The Next: Link Component is a huge help in this process in the sense that it will provide intelligent routing for internal links, routing, and external links, make sure to follow the documentation in wrapping the ‘a’ element instead of leaving empty/blank text.
Responsive Navbar: Succesful Navigation
Stepping into the concept briefly, it is worthy to mention that in this method, and many, when utilizing Bootstrap and React the successful navigation on mobile, to a section on the site or via routing does not close the Navbar menu.
This can be added through a React hook to enable a successful interface action of closing the menu to support the expected user response of completing an action.
The above hook uses state from React to collapse and open the mobile navigation, removing the natively included target id from Bootstrap and replacing it with the hook enables this feature to work for the event of change.
Scrolling Navbar: Color Change
If your Navbar is transparent on top of a Jumbotron or header, then moves it would look a bit odd without contrast. Building a small hook similarly to above enables your Navbar to function with the theme.
You can watch the step by step guide below, though make sure to adjust the JavaScript window event for the ‘if’ statement to adapt the window being scrolled in Node to be defined.
With the most recent changes to Next.js from Vercel, there is no longer a need to create a hook for scroll to top based on routing, their ‘Link’ component, automatically does that for you!
Scaffolding Applications for Agile
The beauty of Bootstrapping applications is the quickness of scaffolding applications that enable the enviroment to quickly appear without having to configure and split specific areas.
Bootstrap provides Container, Rows, and Columns with support for Flexbox and Grid to enable the development of frontends that connect simply and minimally to backends.
Step 5: Layout Components
From this point on it is mostly smooth sailing, scaffolding your components as separate components & containers can prove to do well as a code-splitting tactic to reduce load. Import them in the ‘index.js’ file to dictate which loads at render time.
In specific instance with ‘Z-Index’ it would be recommended to find an alternative to Popper for providing tooltips in React, along with Toasts, there are certain application based limitations to jQuery & JavaScript in React that will requires packages built to fit ES6+ integration.
import React from "react";import Image from "next/image";
function Example() {
return (<> <section id="interest"> <div className="container-fluid"> <div className="row"> <div className="col-xl-6"> <Image src="/" alt="Image" width={1000} height={1000} loading="lazy" className="img-fluid" /> </div> <div className="col-xl-6"> <p>Hello</p> </div> </div> </div> </section></>);}export default Example;
From container down, you can build components in Bootstrap, making sure to use ‘className’ instead of ‘class’. You can also use the Next: Image Component to optimize images, loaded statically from the server side rendered folder.
Z-Index: Finding & Managing Z-Index in React Applications
Step 6: Typesetting
If you have an established brand or guidelines you should be able to import these settings into your CSS and the fonts themselves into the ‘Head’ component.
Alternatively, Bootstrap has some classes than can become quite useful for setting type, responsively built and scaling within the framework, these type-settings can help you quickly scale based on the ‘*”, ‘html’, or ‘body’ type setting via ‘font-size’.
Step 7: Additional Considerations
Menus and interactions can become quite the treat for a user to discover new outlets of information on action. Experiencing the considered steps to evolve how and what establishes an enjoyable path forward, you may want to consider Offcanvas or Modals.
Bootstrap is full of interface focused solutions that many frameworks bring to the table, the goal is to use as little code as possible; with splitting to enable a quick and efficient application.
Analytics: Adding Universal Tags to React
If you are migrating from an existing project, you can add your existing web property tracking code into the head with the other scripts that you use for marketing purposes.
Web Vitals: Experience Scoring (Lighthouse)
Web vitals was introduced as part of the Next.js & Vercel performance analytics that depict the real user experience behind web speed variables.
Thanks for Reading, Keep Constructing!
Looking for more Application Development advice? Follow along on Twitter, GitHub, and LinkedIn. Visit online for the latest updates, news, and information at heyitsjoealongi.com.
