Fix Error: Error: Error serializing `.data` returned from `getServerSideProps`. Reason: `undefined` cannot be serialized as JSON. in Next.js

This error occurs when getServerSideProps returns an object containing undefined values, which JSON.stringify cannot serialize. Next.js requires all props to be serializable. Fix it by replacing undefined values with null, filtering them out, or using JSON.parse(JSON.stringify(data)) to strip undefined fields before returning.

Reading the Stack Trace

Here's what each line means:

• at isSerializable (/app/node_modules/next/dist/server/render.js:284:15): Next.js checks that all values returned from getServerSideProps can be serialized to JSON before sending to the client.
• at renderToHTML (/app/node_modules/next/dist/server/render.js:897:13): The error is thrown during HTML rendering when the serialization check fails on the props object.
• at async DevServer.renderPageComponent (/app/node_modules/next/dist/server/base-server.js:1618:24): The page component's server-side rendering pipeline is interrupted by the serialization error.

Common Causes

export async function getServerSideProps() {
  const user = await prisma.user.findUnique({ where: { id: 1 } });
  return {
    props: { data: user } // user.bio may be undefined
  };
}

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/profile');
  const profile = await res.json();
  return {
    props: { data: { name: profile.name, avatar: profile.avatar } }
    // avatar is undefined if not set
  };
}

export async function getServerSideProps() {
  const post = await getPost(1);
  return {
    props: { data: { ...post, createdAt: post.createdAt } }
    // createdAt is a Date object
  };
}

The Fix

Use JSON.parse(JSON.stringify(data)) to strip undefined values and convert Date objects to strings. This ensures all props are serializable. For more control, you can manually map fields and replace undefined with null.

export async function getServerSideProps() {
  const user = await prisma.user.findUnique({ where: { id: 1 } });
  return {
    props: { data: user }
  };
}

export async function getServerSideProps() {
  const user = await prisma.user.findUnique({ where: { id: 1 } });
  return {
    props: {
      data: JSON.parse(JSON.stringify(user))
    }
  };
}

Testing the Fix

import { getServerSideProps } from '@/pages/dashboard';
import { prismaMock } from '@/test/prisma-mock';

describe('getServerSideProps', () => {
  it('returns serializable props even with undefined fields', async () => {
    prismaMock.user.findUnique.mockResolvedValue({
      id: 1,
      name: 'Alice',
      bio: undefined,
    });
    const result = await getServerSideProps({} as any);
    const json = JSON.stringify(result.props.data);
    expect(() => JSON.parse(json)).not.toThrow();
  });

  it('returns user data in props', async () => {
    prismaMock.user.findUnique.mockResolvedValue({ id: 1, name: 'Alice', bio: 'Hello' });
    const result = await getServerSideProps({} as any);
    expect(result.props.data.name).toBe('Alice');
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/gssp-serialization-error,git add src/pages/dashboard.tsx src/pages/__tests__/dashboard.test.tsx,git commit -m "fix: sanitize getServerSideProps return value for JSON serialization",git push origin fix/gssp-serialization-error

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Run the test suite locally to confirm props are serializable.
2. Open a pull request with the serialization fix.
3. Wait for CI checks to pass on the PR.
4. Have a teammate review and approve the PR.
5. Merge to main and verify the page loads correctly in staging.

Frequently Asked Questions