Using local env to test sanity IO

The error is:

Uncaught error: Can't find variable: process
http://localhost:3333/sanity.config.ts:5:26

It is with the .env.local file. I found this by entering my project ID directly into the sanity config file. However, I am trying to figure why my .env.local file will not work. I have noticed from watching a tutorial my .env file does not have the little gear icon that other people had. Why is that?

here is my .en.local file:

NEXT_PUBLIC_SANITY_PROJECT_ID= xxxxxx
NEXT_PUBLIC_SANITY_DATASET= production
NEXT_PUBLIC_SANITY_API_VERSION=2022-11-15

see pic

here is the sanity.config.ts file pulling using env.local file:

import {defineConfig} from 'sanity'
import {deskTool} from 'sanity/desk'
import {visionTool} from '@sanity/vision'
import {schemaTypes} from './schemas'

const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!


export default defineConfig({
   name: 'Jeremy',
   title: 'Sanity Stuff',

  projectId,
  dataset,

  plugins: [deskTool(), visionTool()],

  schema: {
    types: schemaTypes,
  },
 })

tsconfig.json:

 {
  "compilerOptions": {
   "target": "es5",
   "lib": ["dom", "dom.iterable", "esnext"],
   "allowJs": true,
   "skipLibCheck": true,
   "strict": true,
   "forceConsistentCasingInFileNames": true,
   "noEmit": true,
   "esModuleInterop": true,
   "module": "esnext",
   "moduleResolution": "node",
   "resolveJsonModule": true,
   "isolatedModules": true,
   "jsx": "preserve",
   "incremental": true,
   "baseUrl": ".",
   "paths": {
      "@/*": ["./*"]
   }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

package.json in sanity project folder:

  {
   "name": "sanity-stuff",
   "private": true,
   "version": "1.0.0",
   "main": "package.json",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "sanity dev",
     "start": "sanity start",
    "build": "sanity build",
    "deploy": "sanity deploy",
    "deploy-graphql": "sanity graphql deploy"
  },
  "keywords": [
    "sanity"
  ],
   "dependencies": {
    "@portabletext/react": "^2.0.1",
    "@sanity/image-url": "^1.0.2",
    "@sanity/vision": "^3.0.0",
    "dotenv": "^16.0.3",
    "envdot": "^0.0.3",
    "next": "^13.1.6",
    "next-sanity": "^4.1.2",
    "react": "^18.2.0",
   "react-dom": "^18.2.0",
    "react-is": "^18.2.0",
    "sanity": "^3.0.0",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
   "@sanity/eslint-config-studio": "^2.0.1",
   "eslint": "^8.6.0",
   "prettier": "^2.8.4",
   "typescript": "^4.0.0"
  },
 "prettier": {
 "semi": false,
 "printWidth": 100,
 "bracketSpacing": false,
 "singleQuote": true
  }
 }

Sanity Studio has their own convention for environment variables.

> You can also add your own variables to the Studio environment with the SANITY_STUDIO_ prefix, and you can use so-called “dot env” (.env) files to more easily manage environment variables when developing locally.