Next.js 12 + Bootstrap Boilerplate

I has been nearly two years since I first wrote about a Next.js + Bootstrap starter project on this blog. Since then I have been extending the base template and made it easier to configure and use. It is now available as one of the templates on Goldstack: Next.js + Bootstrap Template.

While I think using the starter project builder is a great way to launch a new project, I think that it can sometimes be useful to see the source code of a working project; either to clone the whole project to adapt it to your needs, or just to copy and paste the parts you need (commonly known as boilerplate, see for instance Next.js boilerplate, GraphQL boilerplate and React Native boilerplate).

Thus, I have created a Next.js 12 + Bootstrap boilerplate project on GitHub. This project is automatically generated from the base Goldstack template, so when the template is updated, the boilerplate will automatically be updated as well.

See the project on GitHub here: github.com/goldstack/nextjs-bootstrap-boilerplate.

Local Development

To get the boilerplate up and running for local development, we only need a few commands:

First to clone the repository:

git clone [e-mail]:goldstack/nextjs-bootstrap-boilerplate.git

Then to install the dependencies and build the project:

yarn
yarn build

Then you can start a local development server that will serve the Next.js project:

cd packages/app-nextjs-bootstrap-1
yarn watch

Bootstrap Configuration

The Bootstrap files are included in the folder packages/app-nextjs-bootstrap-1/src/styles. The file app.css contains the CSS for all bootstrap components compiled from the Bootstrap source.

The package packages/app-nextjs-bootstrap-1 contains a script compile:sass that will update app.css in case any changes are made to the Bootstrap source using node-sass.

The Bootstrap styles are made available for the Next.js application by modifying the application component in _app.tsx. Here we simply import the compiled app.css file.

/* eslint-disable react/prop-types */
import React from 'react';

import './../styles/app.css';

const BootstrapApp = ({ Component, pageProps }): JSX.Element => {
  process.env.GOLDSTACK_DEPLOYMENT =
    process.env.NEXT_PUBLIC_GOLDSTACK_DEPLOYMENT;
  return <Component {...pageProps} />;
};

export default BootstrapApp;

The boilerplate includes the react-bootstrap library, which makes it easy to create components using Bootstrap styling. Bootstrap components can be imported as follows:

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import Image from 'react-bootstrap/Image';

Infrastructure and Deployment

The boilerplate comes with Terraform definitions for setting up the infrastructure for the project on AWS and scripts for deployment. This infrastructure is completely Serverless and thus can be hosted at very low cost, and will scale easily to different levels of usage. For a moderate-traffic site, the infrastructure costs should lie below US$1.00 a month.

The Terraform can easily be adjusted to your needs. Simply modify any of the files in packages/app-nextjs-bootstrap-1/infra/aws.

In order to set up the infrastructure for your project, you will need to adjust the project configuration: goldstack.json:

{
  "$schema": "./schemas/package.schema.json",
  "name": "app-nextjs-bootstrap-1",
  "template": "app-nextjs-bootstrap",
  "templateVersion": "0.1.0",
  "configuration": {},
  "deployments": [
    {
      "name": "prod",
      "awsUser": "goldstack-dev",
      "awsRegion": "us-west-2",
      "configuration": {
        "hostedZoneDomain": "dev.goldstack.party",
        "websiteDomain": "nextjsbootstrap-1646549479572.tests.dev.goldstack.party",
        "defaultCacheDuration": 10
      },
      "tfStateKey": "app-nextjs-bootstrap-1-prod-ef2ea3a3ceb56c2d4c87.tfstate"
    }
  ]
}

Key here are the properties deployments[0].configuration.hostedZoneDomain and deployments[0].configuration.websiteDomain. If you don't know how to determine the hosted zone for your application, check out Hosted Zone Configuration on the Goldstack documentation. websiteDomain is simply the domain you would like to deploy your application to.

Lastly, you will need to configure your local environment to point to the correct AWS account. For detailed instructions on how to do this, see the Goldstack documentation on AWS Configuration.

Once you have everything configured, standing up your infrastructure is as easy as running:

cd packages/app-nextjs-bootstrap-1
yarn infra up prod

Lastly you can deploy your application with:

yarn deploy prod

Bootstrap has been around for a while but certainly remains popular and is used in combination with many frameworks such as Rails, Vue and React.

It is not that difficult to use Bootstrap with Next.js and the combining them enables building feature-rich project quickly.

This boilerplate helps you get set up and started very quickly. Apart from configuration Bootstrap for Next.js it also contains all the quality of life features we expect from contemporary JavaScript projects: it's optimised to work with VSCode, uses TypeScript and unit testing with Jest. To see a full list of features, check out the Next.js + Bootstrap template on Goldstack that this boilerplate inherits all features from.

If you have any comments or ideas for this template, please head over to the Goldstack GitHub project and raise an issue.

---

Cover picture from Unsplash, icons from Flat Icon