Setup

Initialize Next.js Project

Start from the scratch by initializing a new Next.js project using the following command:

npx create-next-app@latest

- Project name : my-app(default)
- Use TypeScript: Yes
- Use ESLint: Yes
- Use Tailwind CSS: Yes
- Use src/ directory: Yes
- Use App Router: Yes
- Use Turbopack: Yes
- Customize the default import alias (@/*): No

Explain

• my-app: The name of your project directory. Replace this with your desired project name.
• typescript: Initializes the project with TypeScript configuration.
• eslint: Sets up ESLint for linting your code.
• tailwind: Includes Tailwind CSS for styling.
• src-dir: Creates a src/ directory and places your application code inside it.
• router: Enables the App Router feature.
• alias: Customizes the default import alias (@/*) to a custom path.

Install Required Packages

• To Apply the Authentication feature with next-auth, mongodb and zod.
• We need to install the required packages by running the following command.

pnpm install next-auth react-hook-form zod mongoose bcryptjs sonner next-themes @hookform/resolvers axios

Setup .env credentials

Create a new file named .env.local in the root of the project and add the following configuration.

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secure-secret # Generate using: openssl rand -base64 32
 
# MongoDB
MONGODB_URI=mongodb+srv://<user>:<password>@cluster.mongodb.net/dbname?retryWrites=true&w=majority
 
# OAuth Providers
GOOGLE_CLIENT_ID=your_google_id
GOOGLE_CLIENT_SECRET=your_google_secret