local next dev and next build give me a 404 page when navigating to an unexciting page. but when i deploy to netlify, this page is not being shown and rather an Internal server error from netlify.


not-found.tsx

'use client'

import Link from 'next/link'

import { Button } from '@/components/ui/button'

export default function NotFound() {
  return (
    <div className="flex h-full w-full max-w-7xl flex-col items-center justify-center gap-6 p-4 md:p-16">
      <div className="flex flex-col items-center gap-3 text-center text-2xl md:flex-row md:text-4xl">
        <h2>404</h2>
        <span className="h-[2px] w-full max-w-xs rounded-full bg-gray-600 md:h-12 md:w-[2px]" />
        <p className="text-gray-600">This page could not be found</p>
      </div>
      <div>
        <Link href="/">
          <Button variant={'default'}>Return Home</Button>
        </Link>
      </div>
    </div>
  )
}

build shows:

Route (app)                                                              Size     First Load JS
├ ○ /_not-found                                                          0 B                0 B
├ ○ /about                                                               266 B          84.7 kB