Next.js Discord

Discord Forum

Deploying NextJs on Amplify error

Unanswered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
Hello, I am deploying a NextJs application on Amplify and I receive an error when the next build gets executed.

From the logs of Amplify:
[INFO]: ✓ Compiled successfully
[INFO]: Linting and checking validity of types ...
[INFO]: ./app/checkout/hooks/useSuccess.js
43:5 Warning: React Hook useEffect has missing dependencies: 'loading', 'reservation', 'router', 'setLegal', and 'setReservation'. Either include them or remove the dependency array. react-hooks/exhaustive-deps
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/app/api-reference/config/eslint#disabling-rules
[INFO]: Collecting page data ...
[WARNING]: TypeError: e.url.startsWith is not a function
at new e (.next/server/chunks/8629.js:1:70402)
at <unknown> (.next/server/app/api/drafts/[draftId]/images/route.js:1:1868)
[WARNING]:
[WARNING]: > Build error occurred
[WARNING]: [Error: Failed to collect page data for /api/drafts/[draftId]/images] {
  type: 'Error'
}
[ERROR]: !!! Build failed


Node version: node:22.13.1
Amplify: Gen 2

amplify.yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --cache .npm --prefer-offline --include=dev
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*
      - .npm/**/*
  environment:
    variables:
      # Env
      NODE_ENV: production
      NEXT_AWS_REGION: ${NEXT_AWS_REGION}
      NEXT_AWS_BUCKET_NAME: ${NEXT_AWS_BUCKET_NAME}
      NEXT_PUBLIC_AWS_CLOUDFRONT_URL: ${NEXT_PUBLIC_AWS_CLOUDFRONT_URL}
      NEXT_AWS_CLOUDFRONT_URL: ${NEXT_AWS_CLOUDFRONT_URL}
      NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN: ${NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
      NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: ${NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY}
      NEXTAUTH_URL: ${NEXTAUTH_URL}


## I am using NextAuth ( https://next-auth.js.org/ )

4 Replies

Polar bearOP
why do I send nextAuth even if the error is at an api route?
I highly believe that the problem is there:
if I remove those import from an api route I dont get the error for that api route:
import { getServerSession } from "next-auth";
import { authOptions } from '@/lib/auth/authOptions';


Obviously I do need those imports for my auth, that's why I am here
I take the moment to link the middleware.js as well, since it runs on many pages ( and on the one that are getting errors as well ):

import { NextResponse } from 'next/server';
import { getToken } from 'next-auth/jwt';

export default async function middleware(request) {
  // Retrieve the JWT from NextAuth
  const token = await getToken({ req: request });

  // If no token, redirect to the login page with callbackUrl
  if (!token) {

    // I didn't have this "checks" before, but I thought the error was there
    let callbackParameter = '';
    if(request.url) {
      callbackParameter = `?callbackUrl=${encodeURIComponent(request.url)}`;
    } else {
      callbackParameter = '?callbackUrl=/';
    }
    
    return NextResponse.redirect(new URL(`/login${callbackParameter}`, request.url));
  }

  if (token.accessToken) {
    request.headers.set('Authorization', `Bearer ${token.accessToken}`);
  }

  return NextResponse.next();
}

export const config = {
  matcher: [
    '/account/:path*',
    '/dashboard/:path*',
    // and all the list of routes and pages...
  ]
};
Polar bearOP
🥲