nextjs-bootstrap-static-pages

NextJS Template configured for pure client-side application (AKA export mode), GitHub Pages deployment, and React-Bootstrap/Bootstrap 5.3 styling.

🚀 Use this template

Via GitHub (recommended)

Press the "Use This Template" button and create your own repository.

Via npx

Invoke create-next-app:

npx create-next-app@latest -e https://github.com/Shaumik-Ashraf/nextjs-bootstrap-static-pages

Setup a new GitHub repository (required for GitHub Pages):

git init
git add --all
git commit -m "init commit"
git remote add origin [new-repository-url]
git push --force -u origin main

📚 Dependencies

• NodeJS v22.11.0 (may work with other versions)

💻 Developer Start

1. Open your command line and run npm install

2. Run npm run dev to start the development server

3. Open http://localhost:3000 to view the live app

⚙️ Deployment

GitHub Pages

1. Go to your repository Settings -> Pages and set Source to GitHub Actions.

2. Allow a few minutes to replicate, and the site will become available.

You can get more guidance at GitHub's documentation.

Generic Instructions

1. First, compile this app into static HTML, CSS, and JavaScript:

npm run build

The final output will be in the out/ folder. The build process is powered by NextJS' export mode.

2. Serve the contents in out/ with a production-grade file server such as NGINX or Apache.

3. Acquire a domain, configure the DNS, and setup SSL certification. Consult your hosting service or web server documentation for how do this.

This app also comes with an npm start command which will run a web server for you, however you should not use it for production since it cannot handle SSL, rate limiting, or other critical features.

📒 Documentation

• NextJS 16 This app uses Pages mode
• React-Bootstrap
• Bootstrap 5
• ReactJS 19

Themes

This template comes with bootstrap themes you can easily swap. The default theme is Brite and you can change themes by loading its corresponding bootstrap CSS file in styles/globals.css. For example to use the solar theme:

// styles/globals.css
@import "../themes/solar/bootstrap.min.css";

Themes are provided by bootswatch. Any theme should work.

You can also add Sass support to NextJS and customize bootstrap directly.

Brite

Cerulean

Journal

Quartz

Vanilla

This is the default bootstrap theme.