Skip to content

Deployment succeeds with OpenNext (Next.js 15 + SST) but shows only logo and 404 page #957

@MuhammadHamza096

Description

@MuhammadHamza096

Hi everyone 👋,

I need some help migrating my Next.js app deployment.

Previously, I had Next.js v11 deployed using @sls-next/serverless-component with the following serverless.yml (pasted below). That setup worked fine.

Now I’ve upgraded to Next.js v15.3.4, but since sls-next doesn’t support newer versions, I switched to OpenNext with SST.

Here’s what I did:

Configured sst.config.ts with openNextVersion: "3.6.2" (latest for Next.js 15).

Added open-next.config.ts (using aws-lambda-streaming).

Built and deployed using:

yarn build
npx @opennextjs/aws@latest build
npx sst deploy --stage qa

The deployment succeeds, and I get a QA URL. However, when I open the site, I only see the logo and then a 404 page not found design.

I suspect I may be missing some configuration step between OpenNext + SST + Next.js 15.

👉 Can anyone guide me on what I might be missing or misconfiguring here?

Thanks in advance 🙏

// serveless.yml

abcCard:
  component: "./node_modules/@sls-next/serverless-component"
  inputs:
    cloudfront:
      distributionId: ${env.DISTRIBUTION_ID}
    bucketName: ${env.BUCKET_NAME}
    name:
      defaultLambda: ${env.DEFAULT_LAMBDA_NAME}
      apiLambda: ${env.API_LAMBDA_NAME}
    memory:
      defaultLambda: 1024
      apiLambda: 128
    runtime:
      defaultLambda: "nodejs20.x"
      apiLambda: "nodejs20.x"
    timeout:
      defaultLambda: 30
      apiLambda: 30
    build:
      env.
        GQL_ENDPOINT: ${env.GQL_ENDPOINT}
        GQL_KEY: ${env.GQL_KEY}

// open-next.config.ts
      import type { OpenNextConfig } from "@opennextjs/aws/types/open-next.js";

      const config: OpenNextConfig = {
        default: {
          override: {
            wrapper: "aws-lambda-streaming",
            // converter: "aws-apigw-v2",
            // Use the environment variables from your existing setup
          },
      
        },
      
      };
      
      export default config;

// sst.config.ts

/// <reference path="./.sst/platform/config.d.ts" />

export default $config({
  app(input) {
    return {
      name: "person-card-next",
      removal: input?.stage === "production" ? "retain" : "remove",
      protect: ["production"].includes(input?.stage),
      home: "aws",
    };
  },
  async run() {
    // Use OpenNext with SST
    const web = new sst.aws.Nextjs("MyWeb", {
      openNextVersion: "3.6.2", // Updated to latest version for Next.js 15 support
      // buildCommand: "npm run build", // Ensure proper build command
      environment: {
        GQL_ENDPOINT: process.env.GQL_ENDPOINT!,
        GQL_KEY: process.env.GQL_KEY!,
        STAGE: $app.stage,
      },
      
      domain: {
        name: getDomainForStage($app.stage),
      },
    });

    return {
      url: web.url,
    };
  },
});

function getDomainForStage(stage: string): string {
  const domainMap: Record<string, string> = {
    dev: "abc-dev.company.com",
    qa: "abc-qa.company.com",
    qa1: "abc-qa1.company.com",
    qa2: "abc-qa2.company.com",
    qa3: "abc-qa3.company.com",
    prod: "abc-prdo.company.com",
  };
  return domainMap[stage];
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    need reproductionThis issue need a reproduction in order to be fixed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions