Nextjs Abstractions & Common Mistakes

🚀 Intro
NextJS has revolutionised React and NodeJS development by simplifying configurations and offering powerful abstractions. In this video, we'll explore three easy-to-implement NextJS abstractions and three common mistakes to avoid.
Desk setup:
💻 Macbook Air M2 8GB RAM, 512GB SSD: (US) amzn.to/4ckunuo | (UK) amzn.to/3PrjddH
⌨️ Apple Magic Keyboard: (US) amzn.to/3IGam3J | (UK) amzn.to/3TetzOQ
🖱️ Apple Magic Mouse: (US) amzn.to/3J1Juf3 | (UK) amzn.to/48YZvfZ
📱 Laptop stand: (US) amzn.to/49X0Ghu | (UK) amzn.to/3wZYwPy
🖥️ Dell 27 inch Full HD Monitor: (US) amzn.to/3TFj0FX | (UK) amzn.to/49ZaIi4
🔲 Dual Monitor Stand: (US) amzn.to/3vr0MyG | (UK) amzn.to/48XxRjK
🎧 Beats Studio Pro: (US) amzn.to/3Tj3yy9 | (UK) amzn.to/3ViiaAr
💡 Notion software project template: affiliate.notion.so/lv-softwa...
⚙️ Middleware
Next.js offers built-in API for creating server middleware, enabling modifications to request or response objects. However, it currently supports only one middleware per project, which can lead to organizational challenges.
🔄 Dynamic imports
NextJS allows dynamic imports of components, ensuring they're loaded only when needed for faster initial page load times.
🖼️ Image optimization
Optimizing images is crucial for performance, especially on mobile devices. Next.js provides automatic image optimization with lazy loading and responsive sizing using the `next/image` component.
📦 Importing nodejs module on client side
Importing Node.js modules on the client-side can lead to errors due to differences in server- and client-rendered markup.
🌊 Hydration errors
Hydration errors occur when there's a mismatch between server- and client-rendered markup or differences in component states. Wrapping `div` elements in `p` tags can trigger such errors.
🪟 Document or window object error
Accessing the `window` object before it's defined can lead to errors like `window is not defined`. To avoid this, access the `window` object within a `useEffect` hook to ensure it's executed after component mount.
Stay tuned for more coding tips and tutorials. Happy coding, and I'll catch you in the next one! 🌟🚀👨‍💻
Background song by:
/ dahjp

[@justinangeloperez5650]

In middleware how can you restrict access on a certain page? I mean like access control for each user? because a user can just type the url

[@enz1222]

You can set up the middleware to run before the protected page(or any other pages you want) is loaded so at that point you can check user authentication redirect them wherever you want if they arent authenticated. so even if they type it out they wont access it.

[@LjupcheVasilev]

Yeah pretty much what @enz1222 said. I am currently making a video on how to implement role based access in nextjs so maybe that will be useful :)

[@justinangeloperez5650]

thank you in advance