Hey! I’m new to DigitalOcean and this is my first post on this community forum.
I’m trying to move my simple Next.js-based webapp from Vercel to DigitalOcean App Platform, but I’m encountering a problem while doing so.
It has two routes:
/
/dashboard
The second one, /dashboard
, is supposed to be available only to authorized users who have the cookie named “jwt”. For purpose of this small example, the code merely checks if the cookie named “jwt” exists. If it does, /dashboard
route is present normally. If the “jwt” cookie doesn’t exist,
This logic is realized with Next.js middleware:
import { cookies } from 'next/headers';
import { NextResponse, type NextRequest } from 'next/server';
export default function middleware(request: NextRequest) {
const { pathname } = request.nextUrl;
console.log(`===> Middleware running, pathname: ${pathname}`);
console.log(JSON.stringify(request));
if (pathname === '/log-out') {
const response = NextResponse.redirect(new URL('/', request.url));
response.cookies.set('jwt', '', { path: '/', expires: new Date(0) });
return response;
}
const token = cookies().get('jwt');
if (!token && pathname !== '/') {
console.log('No token, redirecting to /');
return NextResponse.redirect(new URL('/', request.url));
}
console.log('Token found, continuing');
return NextResponse.next();
}
export const config = {
matcher: [
"/((?!api|_next/static|_next/image|img/|favicon.ico).*)",
],
}
When the “jwt” cookie doesn’t exist, hitting /dashboard
will return a 3xx response code with Location: /
header, to facilitate the redirect.
When the “jwt” cookie exists, hitting /dashboard
should display the “this is a dashboard” text (normal 2xx status code).
This is what happens when I run the project locally, or on Vercel.
It doesn’t matter if the “jwt” cookie exists or not. The response I get from accessing /dashboard
is always 2xx, and the Location
header is missing.
This behavior completely breaks authentication in my app.
This only happens when I deploy the project on DigitalOcean App Platform.
I have created a very simple Next.js app (with npx create-next-app@latest mini-app-nextjs --use-npm
). It allows to reproduce this issue. There’s also a Dockerfile that can be used to upload the image to DigitalOcean Container Storage:
docker build -t registry.digitalocean.com/<your-container-repository-name>/mini-app-nextjs:latest --platform linux/amd64 .
and then docker push it
.
Here’s a running app, deployed on my personal account:
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.