Next.js Fullstack Application. It inlcudes home, portfolio, blog, about, contact and dashboard pages. These pages were created using Next.js app router. This app uses MongoDB database. There is a dark mode toggle button. Context API is used for dark mode and light mode. NextAuth.js is used for Authintication. Users can register, create a new account, and login with user credentials or login using Google account. After login users will see the protected dashbaord that shows the user's posts and will be able to add new posts. Users can delete their own posts.
You can see the website here
To run the application
- Clone this repo
- Run
npm install - Run
npm run dev
Open http://localhost:3000 with your browser
- HTML
- CSS
- Javascript
- Next.js
- MongoDB / Mongoose
- NextAuth.js
- Google Cloud as auth provider
- bcryptjs
- Context API
In src/utils/db.js replace process.env.MONGO with your MongoDB url
Replace process.env.BASE_URL with the api base url in:
src/app/blog/page.jsx
Example: http://localhost:8800/api
In src\app\api\auth\register\route.js Add the Client ID GOOGLE_CLIENT_SECRET and Client secret GOOGLE_CLIENT_SECRET from Google cloud Credentials in APIs & Services
for more information:
Also you need to add your server URI in Authorized JavaScript origins (for example http://localhost:8800) in Google cloud web application
Used to encrypt the NextAuth.js JWT, and to hash email verification tokens. This is the default value for the secret option in NextAuth and Middleware.
For more information
NEXTAUTH_SECRET="This is an example"
When deploying your site, you need to set the NEXTAUTH_URL environment variable to the canonical URL of your website:
NEXTAUTH_URL=https://example.com
For more information
Deployed on Netlify You can see the website here
- Ali Darraji - https://github.com/adarraji
