base-image.md

Simpler NextJS development environment

Most of my NextJS projects have the same config and settings. Only thing that changes across is the app folder. So, making a base nextjs docker image made sense for me

Create a file called page.js which exports a React component

export default function Home() {
  return (
    <main className="min-h-screen p-4">
      <h1>Home</h1>
    </main>
  )
}

Now run

docker run -v `pwd`:/app/app -p 3000:3000 apnerve/nextjs npm run dev

This will run the NextJS development server accessible at http://localhost:3000

You could also create an alias

alias z="docker run -v `pwd`:/app/app -p 3000:3000 apnerve/nextjs npm run"

and then use z dev (other commands also work but won't be of much use at the moment)

The docker image is nothing but a plain create-next-app setup without the app folder. It supports TailwindCSS out of the box which is what I use in every project