Next.js page with getServerSideProps erros with Internal Server Error

Support
,
1

I have a hosted next.js website at https://chipper-kringle-058ff5.netlify.app/

The home page has a getServerSideProps where I fetch some data from a mysql database using prisma.

export const getServerSideProps = (async () => {
	const projects = await db.portfolioProjects.findMany({
		orderBy: {
			order: "asc",
		},
	});

	return {
		props: {
			projects: JSON.parse(
				JSON.stringify(projects),
			) as PortfolioProjects[],
		},
	};
}) satisfies GetServerSideProps<{
	projects: PortfolioProjects[];
}>;

But for some reason, the page just displayes Internal Server Error, with no logs displayed anywhere.

There are no build issues, and when the project is deployed at Vercel, it works just fine.

I tried removing the data fetching from getServerSideProps, in case that prisma has had issues with being used on getServerSideProps, but it had no effect.

The only way the page currently works is when I completely remove getServerSideProps. Other pages that don’t use getServerSideProps work correctly.

Any help would be appreciated, thanks.

2

Hi @minasie , thanks for the post and welcome.
Kindly make sure your type definitions are correct.

Kindly take another close look at the Next.js with TypeScript documentation link below again and make sure you compare the structure of your getServerSideProps with the one from the documentation.

Thanks.

3

Hi i was also facing a same issue on my webite https://fontsbunch.com but now its fine when i hired a nextjs developer for the platform

4

Thanks for the response. I’ve checked out the docs and everything seems in place.

I’ve identified an error message in the netlify logs. Let me share that with you.

ERROR  Error: Cannot find module 'next/dist/server/future/route-modules/pages/vendored/contexts/amp-context'
Require stack:
- /var/task/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/shared/lib/head.js
- /var/task/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/head.js
- /var/task/.next/server/pages/index.js
- /var/task/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require.js
- /var/task/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js
- /var/task/.netlify/functions-internal/___netlify-handler/___netlify-handler.js
- /var/task/___netlify-handler.js
- /var/runtime/index.mjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at /var/task/.netlify/functions-internal/___netlify-handler/requireHooks.js:100:40
    at Module._load (node:internal/modules/cjs/loader:922:27)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at mod.require (/var/task/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:62:32)
    at require (node:internal/modules/cjs/helpers:121:18)
    at Object.<anonymous> (/var/task/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/shared/lib/head.js:29:34)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/var/task/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/shared/lib/head.js',
    '/var/task/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/head.js',
    '/var/task/.next/server/pages/index.js',
    '/var/task/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require.js',
    '/var/task/node_modules/.pnpm/next@13.5.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js',
    '/var/task/.netlify/functions-internal/___netlify-handler/___netlify-handler.js',
    '/var/task/___netlify-handler.js',
    '/var/runtime/index.mjs'
  ]
}

This error message was on the netlify’s logs under SSR Handler.

In case this was an error with the package manager, I tried using npm instead of pnpm, but no change. No idea what to do

5

Hi @minasie , thanks for the extra information.
Can you also share a code snippet of your package.json file.
Thanks.

6 
{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "db:add": "prisma migrate dev --create-only && prisma generate",
    "db:update": "prisma migrate dev",
    "db:deploy": "prisma migrate deploy",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.1",
    "@prisma/client": "^5.1.1",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@t3-oss/env-nextjs": "^0.6.0",
    "@tanstack/react-query": "^4.32.6",
    "@trpc/client": "^10.37.1",
    "@trpc/next": "^10.37.1",
    "@trpc/react-query": "^10.37.1",
    "@trpc/server": "^10.37.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "lucide-react": "^0.279.0",
    "next": "^13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.46.2",
    "superjson": "^1.13.1",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.2"
  },
  "devDependencies": {
    "@types/eslint": "^8.44.2",
    "@types/node": "^18.16.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.3.0",
    "@typescript-eslint/parser": "^6.3.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.47.0",
    "eslint-config-next": "^13.4.19",
    "postcss": "^8.4.27",
    "prettier": "^3.0.0",
    "prettier-plugin-tailwindcss": "^0.5.1",
    "prisma": "^5.1.1",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.1.6"
  },
  "ct3aMetadata": {
    "initVersion": "7.20.2"
  },
  "packageManager": "pnpm@8.7.6"
}

This is what it looks like

7

Hi @minasie thanks for sharing.
Your package.json file seems to be fine. The only information from the build log that is helpful is the quoted error message below.

I see amp-context
First of all make sure if it is a package, you have installed it and you are importing it correctly.
Secondly check the official Next.js documentation below for how use AMP with Next.js if amp-context is related to AMP

Thanks.

8

Thanks for the resources. I’ve looks through both the links. The thing is, I’m not using amp for any of the pages. I didn’t even know it existed before now :sweat_smile:

I’ve confirmed that none of the pages have amp configured or enabled.

Btw, I’ve confirmed that the project works with Vercel and a custom server.

If you want to do so, I can make the project public so u can look through it

9

Hi @minasie , thanks for sharing the extra information.

Kindly share the repository if possible so that I can help with the debugging

Thanks.

10
11

Hi @minasie , thanks for sharing the repository.
Took a look at your repository and it looks like you are mixing .js, .cjs and .mjs files with a TypeScript project.
Kindly change .js, .cjs and .mjs to .ts files and also make sure you change any imports.
Thanks.

12

Thanks for the reply. I tried converting every .*js file to.ts

I’ve managed to convert every .*js to .ts except for next.config.mjs and env.mjs

next.config.ts isn’t supported by next.js yet, and converting env.mjs to env.js has no effect on solving the problem.

Here is the branch I’ve pushed to.

Thanks for the extended help

13

Just wanted to say that I’m also having this issue on a next project, so far only noticing this on my /api/preview route. This is a template project that I created and use for projects and was previously working without issue.

I did a little bit of digging at the amp-context in the error logs is part of next.js’s page routing modules. So far I suspect this is a bug with netlify’s plugin-nextjs and / or something with the ___netlify-handler function that gets generated, but I haven’t nailed anything down yet.

I’m trying to experiment to find a way to get this working and will report back if I’m able to…

14

Welp, in my case I had updated Next.js to 13.5.x. Downgrading to 13.4.19 fixed this for me.

I found other support posts with Netlify engineers chiming in that 13.5 is not supported yet.

@minasie Can you try changing “^13.4.19” to just “13.4.19” i.e. remove the ^ to prevent it from installing 13.5?

3 Likes
15

Yup, this seemed to solve the issue. If this is a known issue by Netlify Engineers, then maybe the deployments they don’t support should have been clearly outlined somewhere.

Regardless. I appreciate the support @clarnx @christopotamus

1 Like
16

Thanks for sharing @christopotamus

1 Like
17

I though it just me who though that downgrading to 13.4.19 really solve the problems.
Already got hard pain for a few days figuring out why 13.5.x and 14.0.x doesn’t work on Netlify rather than on Vercel, and i think the problems is on getServerSideProps, when trying to load the pages that don’t have any SSR it works really fine, but Internal Server Error will show up if i use getServerSideProps even though without api call only return props that contain empty value.
Really looking forward Netlify Teams would fix this bugs soon…

1 Like
18

I was having the same issue and force installing 13.4.19 fixed it.

What’s the solution here? Surely not move to vercel?

19

That’s what I ended up doing hehe

20

No solution at least for a few more weeks.

3 Likes