- [1.1. Next.js Authentication Made Easy with Microsoft Entra ID](#11-nextjs-authentication-made-easy-with-microsoft-entra-id)
- [1.2. Next.js 16 Middleware DEPRECATED - Authentication In Proxy Or Data Access Layer?](#12-nextjs-16-middleware-deprecated---authentication-in-proxy-or-data-access-layer)
- [1.3. Overview of user consent and how to manage it in Microsoft Entra | Microsoft](#13-overview-of-user-consent-and-how-to-manage-it-in-microsoft-entra--microsoft)
- [1.4. Add Tailwind CSS to an Existing Next js Project](#14-add-tailwind-css-to-an-existing-next-js-project)
- [1.5. How to style Material UI component with Tailwindcss in React project](#15-how-to-style-material-ui-component-with-tailwindcss-in-react-project)
The following command creates the nextjs folder structure
Yes, Next.js has a specific syntax to create a project in your current directory instead of creating a new subfolder.
To do this, navigate to your empty project folder in the terminal and run:
```Bash
npx create-next-app@latest .
```
**Important Details:**
1. The Dot (.): This tells the installer to use the current directory as the project root.
2. Naming Conflict: If the folder name contains capital letters (e.g., WebCalibre), the command will fail with an error. Next.js requires the root folder name to be all lowercase and URL-friendly. You must rename your folder to web-calibre before running the command.
This caused me rename to all lower case.
3.Empty Folder: The directory must be empty (except for hidden files like .git). If you already have files in there, the installer will stop to prevent overwriting your work.
What happens next?
Even though you are using the current directory, the interactive prompt will still ask you:
"What is your project named?" You can just hit Enter to accept the current folder name.
Configuration: It will then ask you about TypeScript, ESLint, Tailwind CSS, the src/ directory, and the App Router.
Based on our previous discussions, I recommend selecting "Yes" for TypeScript, ESLint, Tailwind, the src/ directory, and the App Router to match the professional structure we planned for WebCalibre.
In Next.js, the distinction between .env and .env.local is primarily about security and **overriding defaults**.
While both store key-value pairs, they are handled differently by Git and the Next.js runtime.
1. Security & Version Control (Git)The most important reason is that .env.local is automatically ignored by Git in standard Next.js projects.
- .env: Intended for "safe" default values that you want to share with your entire team. It is committed to your repository so that every developer has the same baseline configuration.
- .env.local: Intended for secrets (API keys, database passwords, Azure secrets). Because it is not committed to Git, your private credentials never end up on GitHub or in your production code history.
2. Priority & Overriding
Next.js uses a "hierarchy" of loading.1 If you define the same variable in both files, .env.local wins.
This allows you to set a generic placeholder in .env for the team, but use your specific local developer settings on your own machine.
For example:
- In .env: DATABASE_URL=postgres://localhost:5432/mydb (The team's default)
- In .env.local:
DATABASE_URL=postgres://admin:password123@localhost:5432/my_private_dev_db (Your personal setup)
**The Next.js Loading Order**
Next.js looks for variables in this specific order (from highest priority to lowest):
1. process.env (System environment variables)
2. .env.development.local (Only during npm run dev)
3. .env.local (Available in all environments except test)
|Purpose| Shared defaults/constants|Private secrets & local overrides|
|Committed to Git?|Yes |No (Added to .gitignore)|
|Sensitive Data?| NEVER|YES (API Keys, Secrets)|
|Scope|All developers/environments|Just your machine|
**Best Practice Tip: ** Since .env.local isn't shared on GitHub, it’s a good idea to create a file named .env.example in your project. This file should contain the names of the keys (e.g., AZURE_AD_CLIENT_SECRET=) but leave the values blank, so other developers know which variables they need to create on their own machines.
[Next.js Authentication Made Easy with Microsoft Entra ID](https://www.youtube.com/watch?v=tNLrMKZ-xmc&t=5s)
## 4.6. Install NextAuth.js v5
npm install next-auth@beta
Setup Environment
The only environment variable that is mandatory is the AUTH_SECRET. This is a random value used by the library to encrypt tokens and email verification hashes. (See Deployment to learn more). You can generate one via the official Auth.js CLI running:
npx auth secret
created .env.local
```text
AUTH_SECRET="7cz3Z4kUI2kB3mdAPo58iioUDLSRJ92X8+boEixvO8k=" # Added by `npx auth`. Read more: https://cli.authjs.dev
