The project aims to develop a robust web full stack application with a responsive user interface, secure authentication, efficient database operations, and visually appealing designs, while leveraging the power of React, Next.js, NextAuth, MongoDB, Mongoose, Tailwind CSS, and Vercel.
The front-end development will be done using React and Next.js, which provide a powerful and efficient way to build user interfaces. Next.js, being a framework built on top of React, offers server-side rendering, static site generation, and other performance optimizations.
To ensure secure user authentication, the project will utilize NextAuth. This library simplifies the implementation of authentication features such as sign-in, sign-out and it supports various authentication providers.
For data storage and retrieval, MongoDB will be integrated into the project. Mongoose, an Object Data Modeling (ODM) library for MongoDB, will provide an intuitive and flexible way to interact with the database.
The back-end functionality of the application will be built using Next.js API Routes. These API routes enable the creation of serverless functions that handle specific API endpoints. They will be responsible for performing operations like creating, reading, updating, and deleting data from the MongoDB database.
Form handling will be implemented to facilitate user input and data submission. The application will provide validation and error handling to ensure data integrity and a smooth user experience.
To enhance the visual appearance of the application, React components will be styled using Tailwind CSS. Tailwind CSS is a utility-first CSS framework that offers pre-defined classes to efficiently style components and create consistent designs.
Using file-based routing provides a structured and intuitive approach to defining routes in a web application. Instead of having a centralized routing configuration, routes are defined based on the file structure of the project. Dynamic routes allow for the creation of dynamic URLs that can change based on user input or other factors. This enables the application to handle various scenarios where the URL structure needs to adapt to dynamic data. Nested routes allow for the creation of routes within routes, providing a hierarchical structure to the application's routing system.
In addition to file-based routing, this project utilizes serverless route handlers through Next API. Serverless route handlers enable the development of server-side code that runs in a serverless environment, eliminating the need to manage and maintain server infrastructure. Next API provides a convenient framework for building serverless route handlers, making it easy to define API endpoints and handle incoming requests. The project leverages both client components and server components. Client components are responsible for rendering dynamic content on the client-side, improving the user experience by reducing the need for page reloads. Server components, on the other hand, are executed on the server-side, allowing for efficient server-side rendering and enhancing the performance and scalability of the application.
Lastly, the application will be deployed on Vercel, a cloud platform that provides seamless integration with Next.js. Vercel offers a straightforward deployment process and allows for easy scaling and management of the application.
Creating a Next.js App
Read more about Next.js
Execute the following command to run the Next.JS App.
> npm run dev
> npm install bcrypt mongodb mongoose next-auth react-icons
next.config.js Configuration
configure hostnames under images in your `next.config.js` as mentioned below images: { domains: ['images.unsplash.com', 'lh3.googleusercontent.com'], },
Using MongoDB Atlas for Cloud Storage https://www.mongodb.com/atlas
To get started, create an Organization. Within an Organization you can create
project.
Create a database by choosing your cloud provider, region, and specs.(Free Tier)
G to "Database Access" then edit your password, if you want.
Go to "Network Access" then Edit IP address as 0.0.0.0/0 Go to "Database" then "connect" -> "Drivers" -> choose "Node.js" option as driver, copy the MongoDB URI, then add it in the .env file.
NextAuth.js - Authentication Solution for Next.js Applications
Read More - NextAuth.js Setting up authentication using NextAuth in a Next.js application with Google as the authentication provider: Go to https://console.cloud.google.com/ and create a new project, select "APIs & Services" menu item and click "OAuth consent screen" and click "CREATE" After providing your data, "Save & Continue" and go to "Credentials" menu item.
Click "+ CREATE CREDENTIALS" and choose "OAuth client ID" & provide the data and get the "OAuth client ID" & "Client Secret"
Finally add these "OAuth client ID" & "Client Secret" in the .env file
Setting Auth Provider in Google Cloud Go to "APIs & Service-> Credentials in https://console.cloud.google.com then, under "Web Client1" -> "Authorised redirect URIs and add this URL, "http://localhost:3000/api/auth/callback/google"
Ref: https://next-auth.js.org/getting-started/rest-api#getpost-apiauthcallbackprovider
Generating NEXTAUTH_SECRET Refer: https://next-auth.js.org/configuration/options Copy the command, "openssl rand -base64 32" & go to https://www.cryptool.org/en/cto/openssl & type the following:
"openssl rand -base64 32" to get the secret
Project Deployment on Vercel 1. Ignore .env file in ".gitignore" file 2. Create a new git repository and push your project code
3. Login to Vercel with Github account & create a new project -> Import your Git Repo -> deploy
Configuring NextAuth & Connecting Google Cloud OAuth
.1. Project -> click on the URL under "Deployment" in Vercel dashboard and copy the "Unique view of this deployment" URL
2. Click Project Name in Vercel and go to settings -> Environment Variables and add all env variables & save them.
GOOGLE_ID= GOOGLE_CLIENT_SECRET= MONGODB_URI= NEXTAUTH_URL="Unique view of this deployment" URL NEXTAUTH_URL_INTERNAL="Unique view of this deployment" URL NEXTAUTH_SECRET=
And, also Go to "deployments" in Vercel -> choose latest build -> click "Redeploy"
3. Add "api/auth/callback/google" in google cloud
Go to https://console.cloud.google.com -> APIs & Service -> OAuth consent screen -> Credentials -> web client1 -> add the "Unique view of this deployment" URL (as mentioned above) under "Authorised JavaScript origins" & "Authorised redirect URIs" as base URL
Also, add "Unique-view-deployment-URL/api/auth/callback/google" under "Authorised redirect URIs" and save
Comments