Trouble setting up Sanity with Next.js app

This is a common issue when running Sanity Studio separately from Next.js - the problem is that your Next.js app likely has a postcss.config.js file (created by default with Tailwind CSS), and when you create a standalone Sanity Studio in the same project or a nearby directory, Vite (which powers Sanity Studio) is picking up that PostCSS config but can't properly read it.

Here are the solutions:

Option 1: Rename your PostCSS config (recommended)

In your Next.js app root, rename postcss.config.js to postcss.config.cjs or postcss.config.mjs. This prevents Vite from trying to use the Next.js PostCSS configuration. Your Next.js app will still work fine with the renamed file.

Option 2: Create a separate directory for Sanity Studio

Instead of running pnpm create sanity@latest in your Next.js project directory, create it in a completely separate directory:

cd ..
mkdir my-sanity-studio
cd my-sanity-studio
pnpm create sanity@latest

This keeps the two projects completely isolated and prevents any config conflicts.

Option 3: Add a PostCSS config specifically for Studio

If you need to keep them in the same directory structure, create a postcss.config.cjs file in your Sanity Studio directory (wherever sanity.config.ts lives) with:

module.exports = {
  plugins: {
    autoprefixer: {},
  },
}

Option 4: Configure Vite to ignore PostCSS

In your sanity.config.ts, you can add Vite configuration to handle this:

import {defineConfig} from 'sanity'

export default defineConfig({
  // ... your other config
  vite: {
    css: {
      postcss: null, // Disable PostCSS processing
    },
  },
})

The root cause is that Vite's CSS plugin is trying to read a PostCSS config that's formatted for Next.js/webpack, and the two build tools have slightly different expectations. The easiest fix is usually Option 1 - just rename your PostCSS config file to use the .cjs extension.

After making these changes, restart your Sanity Studio dev server (pnpm dev or whatever command you're using) and the error should be resolved. Your setup of having Studio run separately on port 3333 while your Next.js app runs on 3000 is perfectly valid - it's just this config file conflict that needs to be sorted out.