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...
MongoDB is the most popular document oriented DB. History Created in 2007 Company: doubleclick All data is stored in JSON-like documents which are organized in collections where they can be queried. Flexible schema Unlike relational ~DB~ table, predefined schema of a table is not necessary. This allows you to evolve yout data rapidly without needing to write complex DB migrattion. Data frequently needed together is stored together, in same place This makes read operation extremely fast - because no joins are required....
Adding metadata Adding head elements: description metatag: shows up on google search results. title import a special component by nextjs: Head import Head from 'next/head' wrap with Fragment from react: add <title> in <Head> Inspect - it gets added. <meta name='description' content = ''> We can do this on all pages. Add this to: Homepage [noteId].js - get title, description from props Add Note Deploying the Site! 😍 Vercel Signup with a git repo provider....
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....