Using Nextjs’s built in support for env. variables Next.js has built-in support for loading environment variables from .env.local into process.env. Tried, it worked! Some mistakes I made: I named the file something.env.local - it didnt work - file should be on root with name .env.local. gitignore from nextjs also gives an idea of what this filename should be: # local env files .env*.local Accessing user data (name, email) Using session.user.email...
Add .env file Added env_var.env file at root with following content: GOOGLE_ID= GOOGLE_SECRET= with the values. Also added it to gitignore Install node module dotenv npm install dotenv and in pages\api\auth\[...nextauth].js used at very start, this conditional require: if (process.env.NODE_ENV !== "production") { require("dotenv").config(); } npm run dev - start my next app forgot to do the basic - npm install next-auth restart: Amazing! shows the login button because of change I did in components\layout\MainNavigation....
Listing impressions of nextjs from my experience with it so far, and how it differs from react from a devs perspective. How reactjs works: In case of react, on a prod website, server could be a CDN. Need not be EC2 etc. CDN is dumb server - which is just a convenient way to say CDN is a server but optimized for file delivery, not for compute. index.html contains bundle.js...
Now extend the fetching from MongoDB to Individual page (dynamic page) of next. On the same dynamic page, the URLs also we will get from the DB (GSPa) Both of these to be done in dynamic page [ ] fetching URLs for GSPa export async function getStaticPaths() { const uri = `mongodb+srv://${secret.user}:${secret.pass}@cluster0.xf7jy.mongodb.net/myFirstDB?retryWrites=true&w=majority`; const client = await MongoClient.connect(uri); const db = client.db(); const notesCollection = db.collection("notesColl2"); const notesIds = await notesCollection.find({}, { _id: 1 })....
In last post MongoDB was set up - able to store data from a form. Redirecting to homepage after successful form submit. Use useRouter to do it: In pages/new-note/index.js import { useRouter } from 'next/router' .. const router = useRouter(); // as usual, hook should be called first in react functional component //after successful response of submit router.replace("/"); // or push() Getting data from mongoDB We could do it like, in page component GSP write a connection to our API route > that API route connects to mongoDB i....