Deploying Next.js Landing Page Sample on Netlify - Errors

I understand you're having trouble deploying the Sanity Next.js Landing Page template on Netlify! This is a common issue, and there are several typical problems that come up with this setup. Let me help you troubleshoot.

Common Deployment Issues with the Next.js Landing Page Template on Netlify

Based on the landing page template guide, here are the most common issues and solutions:

1. Build Settings Configuration

For Next.js on Netlify, you need to ensure your build settings are correct:

• Base directory: Leave empty (or set to web if your Next.js app is in a subdirectory)
• Build command: npm run build (or cd web && npm run build if in a subdirectory)
• Publish directory: For Next.js 13.5+, Netlify uses the Essential Next.js plugin which handles this automatically - you should leave the publish directory empty or use .netlify. For older versions, it was .next

2. Monorepo Structure Issues

The sanity-template-nextjs-landing-pages uses a monorepo structure with both the Studio and the web frontend:

• The Studio is typically in /studio
• The Next.js frontend is in /web

You might need to set up two separate Netlify sites - one for the Studio and one for the frontend. When Netlify builds from the repository, it needs to know which part to deploy.

3. Environment Variables

Make sure you've configured these environment variables in Netlify (under Site settings → Environment variables):

• SANITY_PROJECT_ID - Your Sanity project ID
• SANITY_DATASET - Usually "production"
• SANITY_API_TOKEN - If you're using authenticated requests (for preview mode)
• NEXT_PUBLIC_SANITY_PROJECT_ID - For client-side access
• NEXT_PUBLIC_SANITY_DATASET - For client-side access

4. Next.js Runtime Plugin

For modern Next.js versions (13.5+), Netlify requires the @netlify/plugin-nextjs plugin. This should be automatically detected, but if not, add a netlify.toml file to your project root:

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

5. Build Command for Monorepo

If you're deploying the web frontend from the root of a monorepo, your build settings should be:

• Base directory: web
• Build command: npm install && npm run build
• Publish directory: Leave empty (Netlify will auto-detect with the Next.js plugin)

Quick Fix Steps

1. In your Netlify dashboard, go to Site settings → Build & deploy → Build settings
2. Set Base directory to web
3. Set Build command to npm install && npm run build
4. Leave Publish directory empty (let Netlify's Next.js plugin handle it)
5. Add all required environment variables under Site settings → Environment variables
6. Trigger a new deploy

Specific Error Messages to Watch For

Without knowing your exact error, here are the most common ones:

• "Directory not found" - Check your base directory and publish directory settings
• "Module not found" - Make sure npm install runs in the correct directory
• Build timeout - Check for missing dependencies or infinite loops
• Environment variable errors - Verify all Sanity variables are set correctly

Additional Resources

• Check the Sanity deployment documentation for hosting options
• Review Netlify's Next.js documentation for framework-specific settings
• Join the Sanity community where you can get help from other developers who've deployed similar setups

If you're still having issues after trying these steps, it would be helpful to know:

• The specific error message from your Netlify build log
• Which version of Next.js you're using
• Whether you're trying to deploy the Studio, the frontend, or both

Feel free to share those details and I can provide more targeted help!