Description
Package.json file
{
"name": "medusa-next",
"version": "1.0.3",
"private": true,
"author": "Kasper Fabricius Kristensen <[email protected]> (https://www.medusajs.com)",
"description": "Next.js starter to be used with Medusa server",
"keywords": [
"medusa-storefront"
],
"scripts": {
"dev": "next dev --turbopack -p 8000",
"build": "next build",
"start": "next start -p 8000",
"lint": "next lint",
"prettier": "prettier --write \"./**/*.{js,jsx,ts,tsx}\"",
"format": "npm run prettier"
},
"resolutions": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"dependencies": {
"@headlessui/react": "^1.7.17",
"@hookform/error-message": "^2.0.1",
"@medusajs/medusa-js": "^6.0.0",
"@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-navigation-menu": "^1.1.3",
"@stripe/react-stripe-js": "^2.1.2",
"@stripe/stripe-js": "^1.54.2",
"clsx": "^2.0.0",
"country-list": "^2.3.0",
"framer-motion": "^10.16.1",
"lodash": "^4.17.21",
"next": "^15.0.3",
"react": "^18.2.0",
"react-country-flag": "^3.1.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.45.4",
"react-icons": "^4.10.1",
"react-intersection-observer": "^9.5.2",
"sharp": "^0.32.5",
"stripe": "^14.8.0",
"tailwindcss-animate": "^1.0.6",
"usehooks-ts": "^2.9.1",
"zod": "^3.22.4"
},
"devDependencies": {
"@types/country-list": "^2.1.2",
"@types/lodash": "^4.14.197",
"@types/node": "^20.5.6",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"autoprefixer": "^10.4.15",
"eslint": "^8.10.0",
"eslint-config-next": "^15.0.3",
"eslint-plugin-tailwindcss": "^3.13.0",
"postcss": "^8.4.29",
"prettier": "^3.0.2",
"prettier-plugin-tailwindcss": "^0.5.3",
"tailwindcss": "^3.3.3",
"typescript": "^5.2.2"
}
}Node.js version
v20.16.0
Operating system name and version
MacOS Sequoia 14.4
Browser name
Chrome
What happended?
The Next.js starter middleware only accepts MEDUSA_BACKEND_URL but not NEXT_PUBLIC_MEDUSA_BACKEND_URL environment variable, causing confusion and errors when setting up the storefront. The middleware throws this error:
Error: Middleware.ts: Error fetching regions. Did you set up regions in your Medusa Admin and define a MEDUSA_BACKEND_URL environment variable? Note that the variable is no longer named NEXT_PUBLIC_MEDUSA_BACKEND_URL.
However, other parts of the codebase use NEXT_PUBLIC_MEDUSA_BACKEND_URL. This means users need to define both variables to get the application working, which is confusing and not well documented.
Expected behavior
The middleware should accept either environment variable name:
MEDUSA_BACKEND_URL (for middleware)
NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY (for client components)
Or at least clearly explain in documentation that both are needed for different parts of the application.
Actual behavior
When only NEXT_PUBLIC_MEDUSA_BACKEND_URL is defined in .env.local (which is what most examples show), the middleware fails with:
Error: Middleware.ts: Error fetching regions. Did you set up regions in your Medusa Admin and define a MEDUSA_BACKEND_URL environment variable? Note that the variable is no longer named NEXT_PUBLIC_MEDUSA_BACKEND_URL.
This happens even though regions are properly set up and accessible via the API directly.
Link to reproduction repo
Clone the repository: git clone https://github.com/medusajs/nextjs-starter-medusa.git