Setup nextjs with bootstrap

Initialize nextjs project with typescript

pnpm create next-app --typescript

Install bootstrap

pnpm add bootstrap

Add bootstrap css to app/layout.tsx or pages/_app

import "bootstrap/dist/css/bootstrap.min.css";

Create a bootstrap client component components/Bootstrap.tsx

"use client";

import { useEffect } from "react";

function BootstrapClient() {
  useEffect(() => {
  }, []);

  return null;

export default BootstrapClient;

Add bootstrap client component to app/layout.tsx or pages/_app

layout.tsx might look like this.

import BootstrapClient from "@/components/boostrap";
import "bootstrap/dist/css/bootstrap.css";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",

export default function RootLayout({
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <BootstrapClient />

Exporting as static site.

Add the following to next.config.js

const nextConfig = {
  distDir: "build",
  output: "export",

export default nextConfig;

This will export the app as a static site to build folder. The build folder will contain all the static files, which can be hosted using any static hosting solution.

example caddy config:

http://localhost:8080 {
  root * build
  encode gzip