Boilerplate and dockerize a NextJS app

Author: Pau Tena

.env

@@ -2,8 +2,6 @@
 # This would be set to the production domain with an env var on deployment
 # used by Traefik to transmit traffic and aqcuire TLS certificates
 DOMAIN="op://Environments/My Full-Stack Template/$ENVIRONMENT/DOMAIN"
-# To test the local Traefik config
-# DOMAIN=localhost.tiangolo.com
 
 # Used by the backend to generate links in emails to the frontend
 FRONTEND_HOST="op://Environments/My Full-Stack Template/$ENVIRONMENT/FRONTEND_HOST"

docker-compose.override.yml

@@ -103,7 +103,10 @@ services:
       args:
         - VITE_API_URL=http://localhost:8000
         - NODE_ENV=development
-
+  next:
+    build:
+      context: ./next
+      dockerfile: Dockerfile.dev
   playwright:
     build:
       context: ./frontend

docker-compose.yml

@@ -1,5 +1,4 @@
 services:
-
   db:
     image: postgres:12
     restart: always
@@ -158,6 +157,36 @@ services:
 
       # Enable redirection for HTTP and HTTPS
       - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.middlewares=https-redirect
+  next:
+    image: '${DOCKER_IMAGE_FRONTEND?Variable not set}-next:${TAG-latest}'
+    restart: always
+    networks:
+      - traefik-public
+      - default
+    build:
+      context: ./next
+      args:
+        - VITE_API_URL=https://api.${DOMAIN?Variable not set}
+        - NODE_ENV=production
+    ports:
+      - "3000:3000"
+    labels:
+      - traefik.enable=true
+      - traefik.docker.network=traefik-public
+      - traefik.constraint-label=traefik-public
+
+      - traefik.http.services.${STACK_NAME?Variable not set}-next-frontend.loadbalancer.server.port=3000
+
+      - traefik.http.routers.${STACK_NAME?Variable not set}-next-frontend-http.rule=Host(`${DOMAIN?Variable not set}`)
+      - traefik.http.routers.${STACK_NAME?Variable not set}-next-frontend-http.entrypoints=http
+
+      - traefik.http.routers.${STACK_NAME?Variable not set}-next-frontend-https.rule=Host(`${DOMAIN?Variable not set}`)
+      - traefik.http.routers.${STACK_NAME?Variable not set}-next-frontend-https.entrypoints=https
+      - traefik.http.routers.${STACK_NAME?Variable not set}-next-frontend-https.tls=true
+      - traefik.http.routers.${STACK_NAME?Variable not set}-next-frontend-https.tls.certresolver=le
+
+      # Enable redirection for HTTP and HTTPS
+      - traefik.http.routers.${STACK_NAME?Variable not set}-next-frontend-http.middlewares=https-redirect
 volumes:
   app-db-data:
 

next/.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+npm-debug.log
+dist
+.next
+.DS_Store
+.env
+.git

next/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

next/Dockerfile

@@ -0,0 +1,23 @@
+# Use the official Node.js image as the base image
+FROM node:20-alpine
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the container
+COPY package*.json /app/
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application files
+COPY ./ /app/
+
+# Build the Next.js application
+RUN npm run build
+
+# Expose the application on port 4000
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]

next/Dockerfile.dev

@@ -0,0 +1,20 @@
+# Use the official Node.js image as the base image
+FROM node:20-alpine
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the container
+COPY package*.json /app/
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application files
+COPY ./ /app/
+
+# Expose the application on port 4000
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "run", "dev"]

next/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

next/app/favicon.ico

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}