title: Vercel causes 500: Internal Server Error (works on localhost)
body: <p>I'm creating a page where I can get an overview of all my notes/summaries.</p>
  <p>The note's pages are markdown files converted into HTML used in a dynamic file.<br />
  The '/note' page is 1 page with a group of all the notes. Now I want to implement a search function to sort the notes.</p>
  <p>When I run <code>npm run dev</code> it starts the localhost and everything works fine (also the search bar).
  But when I push to my Github repo &amp; when it deploys on Vercel, it gives a 500: Internal Server Error.</p>
  <p>In the Vercel log you can see that the /note is a server-side page because it has the &quot;λ&quot; symbol.</p>
  <blockquote>
  <p>18:40:46.860  λ /notes    12.2 kB     104 kB</p>
  </blockquote>
  <p>Is it the <code>router.push(&quot;/notes&quot;)</code> that is causing this or something else?</p>
  <p>Source code: <a href="https://github.com/Wilmox/portfolio" rel="nofollow noreferrer">https://github.com/Wilmox/portfolio</a><br />
  Vercel hosted page: <a href="https://portfolio-p3hy5j90k-wilmox.vercel.app/" rel="nofollow noreferrer">https://portfolio-p3hy5j90k-wilmox.vercel.app/</a></p>
  <p>Here is also a gif of the problem in action: <a href="https://i.stack.imgur.com/rrOsU.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rrOsU.gif" alt="500: Internal Server Error" /></a></p>
  <p>I hope someone can help me :)</p>
  <p>Code for my notes/index.js:</p>
  <pre class="lang-js prettyprint-override"><code>import Head from 'next/head';
  import Link from 'next/link';
  import styles from '../../styles/Home.module.css';
  import Footer from '../../components/Footer.js';
  import Navigation from '../../components/Navigation';
  import { Rating } from '@material-ui/core';
  import Chip from '../../components/Chip.js';
  
  import noteStyle from '../../styles/Notes.module.css';
  
  import { getAllNotes } from '../../lib/data';
  import Search from '../../components/Search';
  
  export default function Notes({ notes }) {
    return (
      &lt;div id=&quot;top&quot; className={styles.container}&gt;
        &lt;Head&gt;
        &lt;/Head&gt;
  
        &lt;main className={styles.main}&gt;
          &lt;section&gt;
            &lt;Navigation /&gt;
          &lt;/section&gt;
          &lt;section className={noteStyle.noteSection}&gt;
            &lt;header&gt;
              &lt;h1&gt;Notes &amp; Summaries&lt;/h1&gt;
              &lt;p&gt;These are notes I&amp;apos;ve taken or summaries I&amp;apos;ve made of the things I read or listen to. Parts may come straight from the source, while others are written by me. &lt;br /&gt;
              I do this to get the author&amp;apos;s high-level idea or to brush up on something for later, or for people who don&amp;apos;t feel like reading / listening to a whole book.&lt;/p&gt;
            &lt;/header&gt;
            
            &lt;Search /&gt;
  
            &lt;div className={noteStyle.notes}&gt;
              {notes.map((note) =&gt; (
                &lt;Link key={note.slug} href={`/note/${note.slug}`}&gt;
                  &lt;a key={note.slug} className={noteStyle.noteCard}&gt;
                    &lt;h2 key=&quot;title&quot;&gt;{note.title}&lt;/h2&gt;
                    &lt;h3 key=&quot;author&quot;&gt;{note.author}&lt;/h3&gt;
                    &lt;p key=&quot;abstract&quot;&gt;
                      {note.abstract}
                    &lt;/p&gt;
                    &lt;div className={noteStyle.aboutNote}&gt;
                      &lt;Rating key=&quot;rating&quot; className={noteStyle.rating} name=&quot;half-rating-read&quot; defaultValue={note.rating} precision={0.5} readOnly /&gt;
                      &lt;Chip key=&quot;label&quot; className={noteStyle.noteChip} bgColor={note.labelColors[0]} text={note.labelText[0]} icon={note.labelIcons[0]} /&gt;
                    &lt;/div&gt;
                  &lt;/a&gt;
                &lt;/Link&gt;
              ))}
  
            &lt;/div&gt;
          &lt;/section&gt;
        &lt;/main&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    )
  }
  
  export async function getServerSideProps(context) {
    const allNotes = getAllNotes();
  
    const searchTerm = context.query.search ?? &quot;&quot;;
  
    let searchNotes = allNotes;
  
    if (searchTerm != null) {
      searchNotes =  searchNotes.filter((note) =&gt; {
        //Searches in title, author &amp; abstract data field for a match with the query
        return note.data.title.toLowerCase().includes(searchTerm.toLowerCase()) || note.data.author.toLowerCase().includes(searchTerm.toLowerCase()) || note.data.abstract.toLowerCase().includes(searchTerm.toLowerCase())
      });
    }
  
    
    
    return {
      props: {
        //Here data serialising (dates, urls, ...),
        notes: searchNotes.map(({ data, content, slug }) =&gt; ({
          ...data,
          content,
          slug,
        })),
  
      },
    };
  };
  </code></pre>
  <p>Code for the Search.js component</p>
  <pre class="lang-js prettyprint-override"><code>import style from './Search.module.css';
  import SearchIcon from '@mui/icons-material/Search';
  import { useState, useEffect } from 'react';
  import { useRouter } from 'next/router'
  
  export default function Search() {
      const [input, setInput] = useState('');
      const router = useRouter();
  
      useEffect(() =&gt; {
          if (input != '') {
              router.push('/notes?search=' + input);
              console.log(&quot;You searched for &quot;, input);
          } else {
              router.push('/notes');
          }
        }, [input]);
  
      const search = (e) =&gt; {
          e.preventDefault();
          setInput(e.target.value);
      }
  
      return (
          &lt;div className={style.search}&gt;
                  &lt;SearchIcon className={style.search__inputIcon}/&gt;
                  &lt;input type=&quot;text&quot; placeholder=&quot;Search for a note...&quot; value={input} onChange={search} /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>Vercel build log:</p>
  <pre><code>18:40:23.357    Cloning github.com/Wilmox/portfolio (Branch: main, Commit: afef201)
  18:40:23.965    Cloning completed: 607.51ms
  18:40:23.981    Analyzing source code...
  18:40:25.095    Installing build runtime...
  18:40:26.928    Build runtime installed: 1.833s
  18:40:29.439    Looking up build cache...
  18:40:29.580    Build cache found. Downloading...
  18:40:32.275    Build cache downloaded [37.34 MB]: 2694.570ms
  18:40:33.436    Installing dependencies...
  18:40:33.440    Detected `package-lock.json` generated by npm 7...
  18:40:34.913    up to date in 1s
  18:40:34.913    156 packages are looking for funding
  18:40:34.913      run `npm fund` for details
  18:40:34.922    Detected Next.js version: 11.1.0
  18:40:34.927    Running &quot;npm run build&quot;
  18:40:35.193    &gt; portfolio@1.0.0 build
  18:40:35.193    &gt; next build
  18:40:35.905    info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
  18:40:36.056    info  - Checking validity of types...
  18:40:37.907    ./pages/index.js
  18:40:37.907    28:9  Warning: Custom fonts not added at the document level will only load for a single page. This is discouraged. See https://nextjs.org/docs/messages/no-page-custom-font.  @next/next/no-page-custom-font
  18:40:37.908    72:15  Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
  18:40:37.908    85:15  Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
  18:40:37.908    ./pages/note/[slug].js
  18:40:37.908    26:9  Warning: Custom fonts not added at the document level will only load for a single page. This is discouraged. See https://nextjs.org/docs/messages/no-page-custom-font.  @next/next/no-page-custom-font
  18:40:37.908    ./pages/notes/index.js
  18:40:37.909    24:9  Warning: Custom fonts not added at the document level will only load for a single page. This is discouraged. See https://nextjs.org/docs/messages/no-page-custom-font.  @next/next/no-page-custom-font
  18:40:37.909    ./pages/projects/index.js
  18:40:37.909    19:9  Warning: Custom fonts not added at the document level will only load for a single page. This is discouraged. See https://nextjs.org/docs/messages/no-page-custom-font.  @next/next/no-page-custom-font
  18:40:37.910    32:15  Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
  18:40:37.910    45:15  Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
  18:40:37.910    58:15  Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
  18:40:37.910    71:15  Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
  18:40:37.910    ./components/Search.js
  18:40:37.910    17:10  Warning: React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
  18:40:37.911    info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
  18:40:37.911    info  - Creating an optimized production build...
  18:40:44.074    info  - Compiled successfully
  18:40:44.076    info  - Collecting page data...
  18:40:45.109    info  - Generating static pages (0/8)
  18:40:45.558    info  - Generating static pages (2/8)
  18:40:46.768    info  - Generating static pages (4/8)
  18:40:46.784    info  - Generating static pages (6/8)
  18:40:46.830    info  - Generating static pages (8/8)
  18:40:46.832    info  - Finalizing page optimization...
  18:40:46.859    Page                                                           Size     First Load JS
  18:40:46.859    ┌ ○ /                                                          3.62 kB        99.1 kB
  18:40:46.859    ├   └ css/72e3b52ac8c0e0986525.css                             2.5 kB
  18:40:46.859    ├   /_app                                                      0 B            67.4 kB
  18:40:46.859    ├ ○ /404                                                       194 B          67.6 kB
  18:40:46.859    ├ λ /api/hello                                                 0 B            67.4 kB
  18:40:46.860    ├ ● /note/[slug] (3945 ms)                                     2.97 kB        95.1 kB
  18:40:46.860    ├   └ css/0825cd3181548be7acd8.css                             2.6 kB
  18:40:46.860    ├   ├ /note/a-brief-history-of-time (1423 ms)
  18:40:46.860    ├   ├ /note/rich-dad-poor-dad (1232 ms)
  18:40:46.860    ├   ├ /note/how-to-win-friends-and-influence-people (1044 ms)
  18:40:46.860    ├   └ /note/the-magic-of-thinking-big
  18:40:46.860    ├ λ /notes                                                     12.2 kB         104 kB
  18:40:46.860    ├   └ css/48d66f471e6a5bb11874.css                             2.13 kB
  18:40:46.860    └ ○ /projects                                                  1.35 kB        93.7 kB
  18:40:46.860        └ css/bf38675255d10289bb03.css                             1.39 kB
  18:40:46.860    + First Load JS shared by all                                  67.4 kB
  18:40:46.860      ├ chunks/framework.2191d1.js                                 42.4 kB
  18:40:46.860      ├ chunks/main.9399b7.js                                      23.6 kB
  18:40:46.860      ├ chunks/pages/_app.4003d7.js                                586 B
  18:40:46.860      ├ chunks/webpack.ddd010.js                                   822 B
  18:40:46.860      └ css/9b9279095ab98c9a275c.css                               752 B
  18:40:46.862    λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
  18:40:46.862    ○  (Static)  automatically rendered as static HTML (uses no initial props)
  18:40:46.862    ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
  18:40:46.862       (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
  18:40:46.862    Next.js Analytics is enabled for this production build. You'll receive a Real Experience Score computed by all of your visitors.
  18:40:48.949    Traced Next.js server files in: 1.983s
  18:40:59.634    Created all serverless functions in: 10.686s
  18:41:00.140    Uploading build outputs...
  18:41:01.138    Deploying build outputs...
  18:41:06.098    Build completed. Populating build cache...
  18:41:29.887    Uploading build cache [37.28 MB]...
  18:41:30.595    Build cache uploaded: 708.32ms
  18:41:31.120    Done with &quot;package.json&quot;
  
  </code></pre>