100DaysOfCode

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....

Day 6 Using mongoDB in the nextjs app. So far covered: getStaticProps, and getStaticPaths and getServerSideProps They allow us to fetch data for pre-rendering those pages, So that we pre-render the pages with the data, instead of without the data they might need. Upto this point, we’re only working with dummy data though (not actually fetching from anywhere) - it is actually hard-coded data We do have this Add New Meetup page here, which would allow users to enter data for a new meetup....

Day 5 Key learnings: React hooks like useRouter cant be used in GSP (getStaticProps) - it can only be used in React function component. So can’t use useRouter to get the slug (like ID of note/post). But we dont need it - we have context param in GSP. In GSP the context will not hold req and res - it has params: the params object has key = the thing between [] in the filename....

Build $ npm run build generates static pages. Terminal: Page Size First Load JS ┌ ● / 724 B 78.2 kB ├ └ css/233a1356c16eb650.css 416 B ├ /_app 0 B 77.5 kB ├ ○ /[noteId] 484 B 78 kB ├ └ css/f0a2be9a550dc29f.css 79 B ├ ○ /404 193 B 77.7 kB └ ○ /new-note 749 B 78.2 kB └ css/29ba8ee8d48d1f49.css 359 B + First Load JS shared by all 77.5 kB ├ chunks/framework-1f10003e17636e37....