<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Fredrik</title>
    <description>The latest articles on DEV Community by Fredrik (@jonjys).</description>
    <link>https://dev.to/jonjys</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4173560%2Fda5bb997-d50f-4fe0-835c-a64a16ee846d.png</url>
      <title>DEV Community: Fredrik</title>
      <link>https://dev.to/jonjys</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jonjys"/>
    <language>en</language>
    <item>
      <title>The five reasons a Next.js app works locally and fails on Vercel</title>
      <dc:creator>Fredrik</dc:creator>
      <pubDate>Fri, 09 Oct 2026 13:36:08 +0000</pubDate>
      <link>https://dev.to/jonjys/the-five-reasons-a-nextjs-app-works-locally-and-fails-on-vercel-6j9</link>
      <guid>https://dev.to/jonjys/the-five-reasons-a-nextjs-app-works-locally-and-fails-on-vercel-6j9</guid>
      <description>&lt;p&gt;Most failed Vercel deploys I have looked at come down to the same five mistakes. None of them show up on your laptop, which is exactly why they are annoying. Here they are, with the fix for each.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Env variables that only exist on your machine
&lt;/h2&gt;

&lt;p&gt;Your code reads &lt;code&gt;process.env.STRIPE_SECRET_KEY&lt;/code&gt;, your &lt;code&gt;.env.local&lt;/code&gt; has it, the Vercel project does not. The error often points somewhere unrelated, like an SDK throwing on an undefined key.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fix:&lt;/strong&gt; keep a committed &lt;code&gt;.env.example&lt;/code&gt; with every variable name and an empty value, and check the Vercel project settings for each name in every environment. Preview is the scope people forget. Also check your &lt;code&gt;.gitignore&lt;/code&gt;: a rule like &lt;code&gt;.env*&lt;/code&gt; hides &lt;code&gt;.env.example&lt;/code&gt; too, so add &lt;code&gt;!.env.example&lt;/code&gt; at the end.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Imports that resolve on macOS and fail on Linux
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;import Header from './components/Header'&lt;/code&gt; works when the file is &lt;code&gt;header.tsx&lt;/code&gt;, because macOS and Windows ignore letter case. Vercel builds on Linux, which does not.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fix:&lt;/strong&gt; match the casing exactly. To rename a file by case in git, use &lt;code&gt;git mv header.tsx Header.tsx&lt;/code&gt;, otherwise git may not notice the change.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Node only packages in Edge code
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;fs&lt;/code&gt;, &lt;code&gt;net&lt;/code&gt;, &lt;code&gt;pg&lt;/code&gt;, &lt;code&gt;ioredis&lt;/code&gt; and friends cannot run in the Edge runtime, and the bundler follows every static import, including the ones inside your middleware.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fix:&lt;/strong&gt; set &lt;code&gt;export const runtime = 'nodejs'&lt;/code&gt; on that route, or switch to an HTTP based client such as &lt;code&gt;@upstash/redis&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. A lockfile out of sync with package.json
&lt;/h2&gt;

&lt;p&gt;Frozen installs fail with &lt;code&gt;ERR_PNPM_OUTDATED_LOCKFILE&lt;/code&gt; or the npm equivalent. A dependency pinned to &lt;code&gt;latest&lt;/code&gt; can never be satisfied by a frozen lockfile.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fix:&lt;/strong&gt; pin real versions, regenerate the lockfile with the same package manager version Vercel uses, and commit it. Avoid turning off the frozen lockfile, it only hides the drift.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Prisma client not generated on Vercel
&lt;/h2&gt;

&lt;p&gt;The generated client is gitignored and nothing runs the generator during install, so the build imports a client that does not exist.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fix:&lt;/strong&gt; add &lt;code&gt;prisma generate&lt;/code&gt; to the &lt;code&gt;postinstall&lt;/code&gt; script in &lt;code&gt;package.json&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Checking all five automatically
&lt;/h2&gt;

&lt;p&gt;I got tired of finding these one failed deploy at a time, so I built &lt;a href="https://deploydoctor.nyttolabs.com" rel="noopener noreferrer"&gt;DeployDoctor&lt;/a&gt;. Paste a public GitHub repo and it reads the code through the GitHub API, with no clone and no code execution, and checks all five plus hardcoded secrets, build config and Supabase setup. Every finding names the file and line and gives a fix you can copy. It is free for public repos, three scans a day.&lt;/p&gt;

&lt;p&gt;If you want it on every pull request, there is a &lt;a href="https://github.com/marketplace/actions/deploydoctor" rel="noopener noreferrer"&gt;GitHub Action&lt;/a&gt; that runs the same checks before Vercel builds and annotates the findings on the changed files. It is free on public repos with no token.&lt;/p&gt;

&lt;p&gt;Which deploy failures have you hit that are not on this list? I am collecting them for the next checks.&lt;/p&gt;

</description>
      <category>nextjs</category>
      <category>vercel</category>
      <category>webdev</category>
      <category>showdev</category>
    </item>
    <item>
      <title>Hi from Sweden! I build small developer tools, mostly around Next.js and Vercel, and I spend more time than I would like reading failed build logs. Looking forward to learning from everyone here.</title>
      <dc:creator>Fredrik</dc:creator>
      <pubDate>Fri, 09 Oct 2026 13:34:56 +0000</pubDate>
      <link>https://dev.to/jonjys/hi-from-sweden-i-build-small-developer-tools-mostly-around-nextjs-and-vercel-and-i-spend-more-3d6f</link>
      <guid>https://dev.to/jonjys/hi-from-sweden-i-build-small-developer-tools-mostly-around-nextjs-and-vercel-and-i-spend-more-3d6f</guid>
      <description></description>
      <category>buildinpublic</category>
      <category>nextjs</category>
      <category>showdev</category>
      <category>tools</category>
    </item>
  </channel>
</rss>
