nextjs

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

Replace mock data with a real datasource: Send HTTP request once the page has loaded - we would typically use useEffect() Runs whenever component is frist rendered, never after. Do: fetch your data inside it. Manage state for the component - use useState() hook const [loadedNotes, setLoadedNotes] = useState([]); useEffect(()=> { //send http request and fetch data. //set on component setLoadedNotes(LOADED_NOTES); }, []); Full code (with function component): function HomePage(){ const [loadedNotes, setLoadedNotes] = useState([]); useEffect(()=> { //send http request and fetch data....

Day 2 Key Learnings: pages folder name is reserved in nextjs. Others like components is not reserved. How props are passed to a component. Utilize _app.js for anything that affects all pages like Layout - wrap with Layout component, Navigation (with links) etc Using Programmatic (Imperative) Navigation The usual rule of a Reach Hook: Only use directly only at the root level of component function. (e.g. using useRouter) useRouter has not just query that gives slug, it also has push() whose job is equivalent to Link component Starting point of project with some templates...