Next.js Discord

Discord Forum

Next.js App runs on 1 VM but not on the other VM?

Unanswered
Bull Terrier posted this in #help-forum
Open in Discord
Bull TerrierOP
I recently upgraded my application to Next.js 14, pushed all my code to my private Github and things went smoothly on my staging server. However, when I shifted it to my production server I have started to get a blank page upon launching my application with a bunch of 400 Errors.

This is what I see in my network tab, see the image I have attached:

I'm not sure what is going wrong. I tried to output some logs into my layout.tsx (in root /src/app/layout.tsx) and I do get console.log's back but I still cannot seem to render the application. What could be the problem?

I launched up a fresh Next.js 14 application and it works fine, I've tried my existing application within my staging server (a fresh clone from Git) and I have no issues. I just seem to be facing it within my current server.

12 Replies

Bull TerrierOP
I've tried to check my server console + browser console. It doesn't output any errors. I've also checked to see that my node/npm versions match.
Bull TerrierOP
Seems like the problem is src/middleware.ts if I remove the file it works.. very weird. It works fine in my staging server. Isn't that where its supposed to be in?
Silver
How are you building & deploying it? Is it on vercel or are you deploying it manually?
Bull TerrierOP
Manually @Silver
Bull TerrierOP
import { NextResponse } from 'next/server'
import type { NextFetchEvent, NextRequest } from 'next/server'
 
export function middleware(req: NextRequest, event: NextFetchEvent) {
  // Do stuff
 
  return NextResponse.next()
}

I put this file under /src/middleware.ts and the whole app breaks with the errors I stated above
Bull TerrierOP
Yeah seems to not trigger my middleware anywhere else, only under /src/middleware.ts
And when it does, it just breaks, thats my middleware above
This is my next.config.js:
/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: false,
  env: {
    // Define your global constants here
    NEXT_PUBLIC_API_ENDPOINT: process.env.NEXT_PUBLIC_API_ENDPOINT,
    NEXT_PUBLIC_WEBSOCKET: process.env.NEXT_PUBLIC_WEBSOCKET,
    NEXT_PUBLIC_DOMAIN: process.env.NEXT_PUBLIC_DOMAIN,
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.externals.push({
      'utf-8-validate': 'commonjs utf-8-validate',
      'bufferutil': 'commonjs bufferutil'
    })
    return config
  }
};

module.exports = nextConfig

And my tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    // "typeRoots":["./node_modules/@types", "./src/types"],
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
Bull TerrierOP
Tried a fresh install on my VM with Next.js 14 + a basic middleware like above
Still getting the same issue of Error 400
Bull TerrierOP
Bump
Bull TerrierOP
Sorted out, issue was with NGINX Proxy Manager. Seems to be interfering with Next 14 + it's Middleware.

Went with a manual NGINX setup.