Devcontainers for frontend development


There is a VSCode extension by Microsoft called “Remote - Containers” which allows development inside of Docker containers, with configuration managed as code (within a devcontainer.json file).

This has some nice features, namely:

Experiment with a Next.js App

  1. Create a new Next.js app with typescript
  2. Install the Remote Containers VSCode extension
  3. Create the config files:
// For format details, see For config options, see the README at:
  "name": "My Next.js App",

  "context": "..",

  "customizations": {
    "vscode": {
      "settings": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      "extensions": ["mutantdino.resourcemonitor", "esbenp.prettier-vscode"]

  "dockerFile": "../Dockerfile",
  "mounts": [

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  "forwardPorts": [3000],

  "postCreateCommand": "pnpm install"


FROM node:latest

RUN npm i -g pnpm


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config) => {
    // Workaround for Next not detecting changes within a container
    config.watchOptions = {
      aggregateTimeout: 200,
      poll: 1000,

    return config;

module.exports = nextConfig;


  1. Open the folder in VSCode, check bottom lefthand corner to check if the devcontainer starts up