Next.js E-commerce example: $PORT variable undefined in dev script

The issue you're running into is that the $PORT environment variable isn't set in your environment. This is a common problem with example repositories that assume certain environment variables exist.

Here are a few ways to fix this:

Option 1: Set a default port directly in package.json

Change your dev script to use a specific port number instead of the variable:

"dev": "concurrently \"next --port 3000\" \"cd studio && sanity start\""

Or simply remove the --port flag entirely since Next.js defaults to port 3000:

"dev": "concurrently \"next\" \"cd studio && sanity start\""

Option 2: Create a .env file

Create a .env or .env.local file in your project root and define the PORT variable:

PORT=3000

However, note that $PORT syntax is shell variable syntax, not Next.js environment variable syntax. If you want to use environment variables properly with Next.js, you'd need to modify the script differently.

Option 3: Set the variable when running the command

You can set it inline when running the dev command:

PORT=3000 npm run dev

Best approach: I'd recommend Option 1 - just hardcode the port or remove the flag entirely. The $PORT variable pattern is typically used in production environments (like Heroku) where the platform sets the port dynamically, but for local development, you can safely use a fixed port like 3000.

The Sanity Studio part of the command (sanity start) will run on its own default port (usually 3333), so there's no conflict between the two services.