Makeshift Next.js from Scratch (Server-Side Rendering)

[@saurav_varma]

This pops up while I was writing the MVP checklist for open sourcing our framework. I am so hopeful that this is going to inspire people all around and also take away from the 'magic' that is associated with frameworks! Thanks, Tejas!

[@tejask]

Hey, thank you so much for this!!

[@ameencharoliya4643]

This type of content can't be found anywhere. Frankly I always saw frameworks as user perspective but man from today I will dig deeper to understand how it works. I felt like I have a senior friend who's casually showing me how it's done. Thanks a lot Tejas. Please keep up the good work.

[@tejask]

Happy to be your senior

[@rotembs]

Had a great time watching your lecture today at React Next 2023

[@tejask]

Thank you! I appreciate!!

[@ikushaldave]

I usually not comment until I find something best content. For sure Tejas your content and way of explaining is extreme fabulous. Thanks for this and all other content of yours.

[@recursion.]

your makeshift react video from one of those conf was really eye opening and I already know this video is going to be fire, saved to my watch later. (comment for algo)

[@ashobiz]

One of the best video about React. Keep it coming please... Subscribed.

[@tejask]

Awesome.

[@bhatvikrant]

This is insightful Tejas! Thanks for sharing.

[@tejask]

Happy it helped!!

[@lukecartwright613]

I saw this on twitter. Super helpful thank you for sharing knowledge on how to build next js from scratch 😮

[@tejask]

It’s not quite Next.js but hopefully a good starting point!!

[@rockNbrain]

Bro, that was a masterpiece... I have always wanted to go deep into a next.js source code to undestantand the Magik... tks a lot !! 🎉

[@tejask]

Happy it helped!!

[@kratos_respawned]

Masterpiece 🔥🔥

[@wobsoriano]

Love this! Thank you.

[@MacqyGarcia-n7v]

Loved the Qwik Shirt, Thanks for this Kumar

[@tejask]

Hahahahha yeah, Yoav gave me the sticker

[@djibrilm__-]

So our bro decided to give us 10 years of experience in 30 minutes 🙌🙌🙌🙌🙌

[@AlexCastroDev]

Gold content !!! Thanks for sharing

[@tejask]

Appreciate the kind words, Alex!!

[@mykolavlasov1325]

Thanks for the great video! Do you have the initial + final versions somewhere in the github?

[@tejask]

Yup, github.com/TejasQ/makeshift-next.js

[@zemariagp]

Amazing stuff

[@tejask]

Thank you!!

[@washingtonsoaresb]

Really good content, as always!

[@tejask]

Thank you, Washington!!

[@shrijantripathi]

Wow ❤😮

[@tejask]

Thanks!

[@mohmisaghi9303]

very helpful thanks

[@PrabhatS-z3x]

Great content! Thanks Tejas. Curious about the build scripts you have used to bundle client and server code. Would you be able to share this repo? Thanks

[@tejask]

Sure, it’s just esbuild. ¯\_(ツ)_/¯

[@tejask]

github.com/TejasQ/makeshift-next.js

[@romansernato6526]

Hi, it does not do the hydration on the client so it's somehow useless. And as soon as you hydrate it, it breaks, am I wrong?

[@mohmisaghi9303]

Thanks, I can not find the video "react from scratch" can you link it in the description please ?

[@tosheen20]

This is very interesting. Would you mind explaining how hydration is working in this example? Server is rendering page aka Component to the pipeable stream. And when react picks things up on a client it needs to do a hydration, but since client side react contains more code, for example whole component while server just sends page back I am interested to know how hydration comes into play. If APP component contains additional jsx besides Router etc, like Hello from the app, it doesnt cause any hydration issues and I am wondering why. Is that because createRoot method is used instead of hydrateRoot? Thanks a lot.

[@luck-xc7dy]

Hey tejas why do you do React.useState()? why not just use useState()? is there any difference?

[@Jen13022]

best video. but dont understant - if i add server side props to app and start server( i add this props like initial in useState),why i read data from useState hook and its works - in server i dont have javascript

[@arturorugh4837]

Thanks for sharing! Could u please add a git with the source code to the description? Many of us would appreciate it. Thanks

[@tejask]

github.com/TejasQ/makeshift-next.js

[@tejask]

It's also in the description now. :)

[@anshul9714]

source coded please!! I would like to build something on top of this and write a post as well

[@tejask]

github.com/TejasQ/makeshift-next.js

[@pratiktiwari5689]

Please make similar content building things from scratch which is kind of like a black box for us

[@tejask]

Happy to! Any requests?

[@pratiktiwari5689]

Something similar like some part of react internal working. Maybe creating a poc version of fiber

[@jdmayfield88]

Why do all this for something so simple that is easily done with vanilla plain ol' javascript? This is way over-complicated if you just know the languages involved. I'm all down for basic libraries if needed, or css and an html enclosure to make things inside render properly on the client. But this? Over-complicated for use-case.