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(() => {
    require("bootstrap/dist/js/bootstrap.bundle.min.js");
  }, []);

  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({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
      <BootstrapClient />
    </html>
  );
}

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
  file_server
  encode gzip
}