.env Files are an easy way to "simulate" environment variables of the cli. Once you have them in such file, it's easy to go back to project and run it locally without having to remember what needs to go there.

There is couple of schools of thought for using .env files:
- add all .env files to .gitignore and never commit them, sometimes keep .env.example or similar file with defaults or blank values
- keep .env, .env.development, .env.production etc files in repo with global defaults or defaults for respective environment levels. No secrets are stored in there! Developers can create their own .env.local, .env.development.local etc to provide secrets or override defaults. .env.*.local files are gitignored
- keep .env only in repo as defaults without secrets, use .env.local for local overrides

Note, that neither of the above assumes you can keep any secrets in the repo. Do not commit any secret to repo.

Upon production build/deployment you should use actual environment variables instead. This way your code is safe to use and ony production pipelines have access to secret variables. You can create/populate .env file in pipeline and use it instead of actual environment variables, but honestly, usually it's more hustle than just using environment variables.

My understanding has always been that we should never have secrets or sensitive data in front end. Am I missing something here?

Also, remember, that Next.js is not frontend framework by default. It's both frontend and backend. Environment variables are not passed to client code by default. Only variables with NDEXT_BUPLIC_* prefix are compiled into front-end code and exposed to browsers.

Thank you @Roseate Spoonbill , that was one of the most informative answers I ever got. I appreciate the time you took helping me understanding this a bit moore.

I tried hands-on to see hwo next.js works. And after setting up idp and authentication using Clerk I wanted to see how easy I can display the current sessions username and here I see some ineterested things in regards to client / server. Can you point me in the direction how to read up on and learning how to deal with the error below? this is the error I get when trying to retrieve current user in a tsx-file:

import { auth, currentUser } from '@clerk/nextjs/server'

const user = currentUser()

 {user.firstName} 

./node_modules/@clerk/nextjs/dist/esm/app-router/server
Invalid import
'server-only' cannot be imported from a Client Component module. It should only be used from a Server Component.
The error was caused by importing 'node_modules/@clerk/nextjs/dist/esm/app-router/server'

@Sphecid wasp Looks like you are trying to read the user info in client component (a file with use client at the top). For client components, you should use useUser() hook to access the user info. This is probably something you'd need to keep extra attention to as you learn - be mindful whether you are writing server or client code and use appropriate syntax for it. E.g. Clerk has separate tools for use on client and server for accessing auth data. In the code you provided, you are importing from @clerk/nextjs/server which is a good indication, that this code is dedicated for server-side components.