Skip to content

NETLIFY_FIX.md

Latest commit

 

History

History
163 lines (130 loc) · 4.56 KB

NETLIFY_FIX.md

File metadata and controls

163 lines (130 loc) · 4.56 KB

Netlify 404 Error - FIXED ✅

Problem

Site was showing 404 errors and "Page not found" on deployed Netlify site. Resources were not loading correctly.

Root Cause

The netlify.toml configuration was conflicting with the @netlify/plugin-nextjs plugin:

  • ❌ Specified publish = ".next" directory manually
  • ❌ Added custom redirects that conflicted with Next.js routing
  • ❌ Headers configuration was interfering with deployment

Solution Applied

Updated netlify.toml to minimal configuration:

[build]
  command = "npm run build"

[[plugins]]
  package = "@netlify/plugin-nextjs"

[build.environment]
  NODE_VERSION = "20.18.0"

Why This Works

The @netlify/plugin-nextjs plugin automatically handles:

  • ✅ Correct publish directory and output structure
  • ✅ Next.js redirects and rewrites
  • ✅ Serverless functions for dynamic routes
  • ✅ Static asset optimization
  • ✅ ISR (Incremental Static Regeneration) if needed

Manual configuration was causing conflicts!

What Changed

  • Removed: publish = ".next"
  • Removed: Custom redirect rules
  • Removed: Custom header configurations (can add back later if needed)
  • Added: .netlify to .gitignore

Next Steps on Netlify

1. Trigger a New Deployment

Since the configuration has been fixed and pushed to GitHub, Netlify will automatically deploy the changes if you have auto-deploy enabled.

Or manually trigger:

  1. Go to your Netlify dashboard
  2. Click "Deploys" tab
  3. Click "Trigger deploy" → "Deploy site"

2. Clear Cache (Recommended)

To ensure the new configuration is used:

  1. Go to Site settings → Build & deploy
  2. Click "Clear cache and retry deploy"

3. Verify Environment Variables

Make sure you have set:

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id

4. Expected Result

After deployment completes (2-3 minutes):

  • ✅ Homepage loads at your Netlify URL
  • ✅ All static pages work
  • ✅ Navigation functions correctly
  • ✅ Assets (images, CSS, JS) load properly
  • ✅ No 404 errors

Build Output to Expect

Netlify build log should show:

✓ Compiled successfully
✓ Linting and checking validity of types
✓ Generating static pages (7/7)

Route (app)                              Size     First Load JS
┌ ○ /                                    54.6 kB         465 kB
├ ○ /_not-found                          880 B          89.9 kB
├ ○ /manifest.webmanifest                0 B                0 B
├ ○ /robots.txt                          0 B                0 B
└ ○ /sitemap.xml                         0 B                0 B

Plugin "@netlify/plugin-nextjs" ran successfully

Troubleshooting

If still getting 404s:

  1. Check build logs - Look for any errors during the plugin execution
  2. Verify Node version - Should be using 20.18.0
  3. Clear browser cache - Hard refresh (Cmd+Shift+R or Ctrl+Shift+R)
  4. Check Functions tab - Next.js plugin should have created functions

If build fails:

  1. Check that NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID is set
  2. Verify @netlify/plugin-nextjs is installed (it is: v5.13.5)
  3. Review build logs for specific errors

Additional Configuration (Optional)

If you need custom headers later:

You can add them back to next.config.mjs instead of netlify.toml:

headers: async () => {
  return [
    {
      source: '/:path*',
      headers: [
        { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
        { key: 'X-Content-Type-Options', value: 'nosniff' },
        // ... more headers
      ]
    }
  ];
}

(These are already in your next.config.mjs)

For custom redirects:

Add to next.config.js not netlify.toml:

redirects: async () => {
  return [
    {
      source: '/old-path',
      destination: '/new-path',
      permanent: true,
    }
  ];
}

Verification Checklist

After deployment:

  • Visit your Netlify URL
  • Check homepage loads (/)
  • Check manifest loads (/manifest.webmanifest)
  • Check sitemap loads (/sitemap.xml)
  • Check robots.txt loads (/robots.txt)
  • Test wallet connection button
  • Check browser console for errors
  • Verify all images load correctly

Success Indicators

✅ Site is live and accessible
✅ No 404 errors on main pages
✅ Static assets load from CDN
✅ Navigation works correctly
✅ Web3 functionality initializes

Repository: https://github.com/charlie-818/Vaulto-Swap
Latest Commit: b00ce37 - Fix Netlify deployment configuration
Status: Ready to deploy ✅

The site should now deploy correctly on Netlify!