Md Shafikur Rahaman

JavaScript · TypeScript · Reactjs · Nextjs · Nodejs · Expressjs · Mongodb · Postgresql

[Md Shafikur Rahaman @MdShofiur]

@leeerob Was the nextjs site down? if yes what are the root causes?

[Alex Sidorenko @asidorenko_]

Difference between React cache and Next.js unstable_cache

[Alex Sidorenko @asidorenko_]

"Can I debug which fetch requests are cached in Next.js?"

Yep

[Jackson Hinkle 🇺🇸 @jacksonhinkle]

🤡🇮🇱 ISRAEL is doing this on a DAILY BASIS, but wants you to believe they are the VICTIMS!

[Jackson Hinkle 🇺🇸 @jacksonhinkle]

💔🇵🇸 An ISRAELI TERRORIST shot this girl 10 times and then left her to bleed out to death whilst sipping on a coffee like nothing happened…

[Md Shafikur Rahaman @MdShofiur]

Eid Mubarak Everyone.

TAQABBAL ALLAHU MINNA WA MINKUM.

[Alex Sidorenko @asidorenko_]

Reset the form after server mutation in Next.js

[Sam Selikoff @samselikoff]

🎙️ Ep. 183 of @frontendfirstfm is live!

"The Philosophy of Next.js"

We talked about the motivations behind several of the design decisions in Next.js, including caching, why layouts don't have access to the URL, and why the router doesn't expose navigation events.

Enjoy!

(0:00) Intro

(2:58) Why don’t layouts re-render in Next.js?

(7:10) Push-based vs. pull-based rendering

(8:56) Thinking about re-renders in a pure React app

(11:07) Why Server Actions need to call the revalidate* APIs

(12:26) Why doesn’t Next.js pass the request to every page and layout?

(31:40) Immediate-mode rendering vs. “Do the least amount of work possible”

(51:54) Is opting-in to more re-renders framework fighting?

(53:44) Helping users by communicating the philosophy

(56:25) Why doesn’t Next.js expose global router events?

(1:00:17) Why it’s important to understand Next’s design decisions when choosing it for your next project

[Md Shafikur Rahaman @MdShofiur]

❌ Avoid prop-drilling your components to extend them

✅ Instead use composition

[George Moller @_georgemoller]

❌ Avoid prop-drilling your components to extend them

✅ Instead use composition

[Delba @delba_oliveira]

React tip: "use client" misconceptions (1/5)

🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component.

✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle.

(0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle.

(0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle.

(0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle.

(0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle.

(0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.

[Md Shafikur Rahaman @MdShofiur]

@leeerob I propose producing a video focused on OpenTelemetry.

[George Moller @_georgemoller]

⚛️ Composition is king in React world 👇

[Andrew Clark @acdlite]

By the end of 2024, you’ll likely never need these APIs again:

• useMemo, useCallback, memo → React Compiler
• forwardRef → ref is a prop
• React.lazy → RSC, promise-as-child
• useContext → use(Context)
• throw promise → use(promise)
• <Context.Provider> → <Context>

[Matt Pocock @mattpocockuk]

Using a mapped type and key remapping, we can turn a discriminated union into an object 🤯

Looks crazy, but ends up being a really nice mental model.

[Md Shafikur Rahaman @MdShofiur]

Tina and Nextjs is awesome

[TinaCMS @tinacms]

Introducing Visual Open Authoring! ✏️

Edit your live site, in real-time. Anyone can contribute. Backed by Git.

Read more on our new approach to crowdsourcing content. Better yet, try editing https://t.co/SrIJoYD72p directly 🤯 https://t.co/6xcASnoHOZ #tinacms #Nextjs

[Alex Sidorenko @asidorenko_]

Conditional parallel routes in Next.js

[Md Shafikur Rahaman @MdShofiur]

React Developer Should watch this

[George Moller @_georgemoller]

⚛️ Best way to listen for ref changes in React ↓

[Alex Sidorenko @asidorenko_]

Link prefetching in Next.js (App Router)

[Md Shafikur Rahaman @MdShofiur]

Route transition animations in Next.js (App Router) with Framer Motion

[Alex Sidorenko @asidorenko_]

Route transition animations in Next.js (App Router) with Framer Motion

[Md Shafikur Rahaman @MdShofiur]

@delba_oliveira I think the next video can be about On-demand and Time-based Revalidation. What do you think? actually, I would like to know how caching mechanisms work in nextjs.