- 27
- 316 631
Devistry
Netherlands
Приєднався 24 лис 2019
Caching in NextJS was bad. Have they fixed it in NextJS 15?
Vercel has released the release candidate for NextJS version. There are a few interesting changes coming, but the one I'm most exited about is their changes to caching, which right now sucks.
Let's check out the changes coming to caching in NextJS 15.
Blog article about NextJS 15 RC: nextjs.org/blog/next-15-rc
Let's check out the changes coming to caching in NextJS 15.
Blog article about NextJS 15 RC: nextjs.org/blog/next-15-rc
Переглядів: 611
Відео
Tailwind is messy. Make reusable components instead with ReactJS, TailwindCSS, & TypeScript
Переглядів 14 тис.Рік тому
I love TailwindCSS, but it can create some very messy HTML code. You can make a massive improjevent by reusing your common elements as a component. This video shows you how you can build your own library of reusable components. 00:00 Intro 03:05 Creating a component 04:05 Using the children prop 05:50 Passing button attributes (onClick, etc) 10:18 Overriding styles with twMerge 14:45 Component ...
NextJS app router is amazing! Learn the new NextJS in this 1.5 hour crash course.
Переглядів 3,2 тис.Рік тому
The new NextJS app router has finally been released, and it's awesome. This crash course teaches Nextjs pros and beginners alike the new app router. 00:00 Intro 04:18 Create new NextJS project 10:36 Defining page and layout routes 20:30 Tailwind setup 22:05 Route groups and group layouts 32:15 Data fetching and rendering dynamic data 42:33 Dynamic routes 48:34 Static vs Dynamic rendering & Serv...
The best ReactJS & NextJS folder structure | How to organize and scale your React project
Переглядів 3,2 тис.Рік тому
React is a HTML rendering JavaScript library. Not a web development framework as it is often wrongly called. If it were a framework, React would decide how we should organize our files. Instead it leaves this up to you. This video shows you my prefered folder structure for making large React projects that are easy to maintain and scale. 🕑 Timestamps 00:00 Intro 01:17 Project setup and SURPRISE ...
Serve a React app from an Express server | React frontend and Express API setup in 1 project!
Переглядів 19 тис.2 роки тому
React and Express are the most popular web framework stack. Many developers create their React and Express projects separately. This means that you have to host 2 different projects: a server, and the static react site. But ExpressJS is a server that can serve static files. So with a little bit of setup, we can serve your React app from your Express app from 1 project. The github repository: gi...
Autocomplete input dropdown | HTML, CSS, JS
Переглядів 21 тис.3 роки тому
Create a autocomplete input dropdown with HTML, CSS and JavaScript. Join the community on Discord: discord.gg/cWqA6hPr
Responsive navbar with mobile hamburger menu | HTML, CSS, JS
Переглядів 6 тис.3 роки тому
Create a responsive navbar with hamburger menu dropdown for mobile screen sizes with HTML, CSS and JavaScript. Join the community on Discord: discord.gg/cWqA6hPr
Blog with Next.js and and Strapi CMS
Переглядів 50 тис.3 роки тому
Create a blog using the Next.js React framework, and Strapi CMS. Code: github.com/jgbijlsma/blog_next_strapi_project_video Discord: discord.gg/vNrm6g9r Sections: 00:00 - Intro 06:43 - Installing Next and Strapi 10:00 - Writing blog posts in Strapi 18:26 - Next overview 28:20 - Getting blog post data with next 44:14 - Navbar and routing 48:32 - Styling with Sass 01:01:05 - Building the homepage ...
MERN stack secure authentication Part 14 | Deploying the frontend| JWT, Cookies, Bcrypt, React Hooks
Переглядів 4,2 тис.3 роки тому
Updated 2021 MERN stack user authentication tutorial series. In this tutorial series, I'm setting up a project template for working with user authentication in the MERN stack. You will learn to register user accounts to a MongoDB database, log in users on the react frontend and verify logged in users. The authentication is secured by technologies such as JsonWebTokens, Bcrypt and HTTP-only cook...
MERN stack secure authentication Part 13 | Deploying the backend | JWT, Cookies, Bcrypt, React Hooks
Переглядів 4,1 тис.3 роки тому
Updated 2021 MERN stack user authentication tutorial series. In this tutorial series, I'm setting up a project template for working with user authentication in the MERN stack. You will learn to register user accounts to a MongoDB database, log in users on the react frontend and verify logged in users. The authentication is secured by technologies such as JsonWebTokens, Bcrypt and HTTP-only cook...
MERN stack secure authentication Part 12 | Rendering customers | JWT, Cookies, Bcrypt, React Hooks.
Переглядів 6 тис.3 роки тому
Updated 2021 MERN stack user authentication tutorial series. In this tutorial series, I'm setting up a project template for working with user authentication in the MERN stack. You will learn to register user accounts to a MongoDB database, log in users on the react frontend and verify logged in users. The authentication is secured by technologies such as JsonWebTokens, Bcrypt and HTTP-only cook...
MERN stack secure authentication Part 11 | React auth context | JWT, Cookies, Bcrypt, React Hooks.
Переглядів 10 тис.3 роки тому
Updated 2021 MERN stack user authentication tutorial series. In this tutorial series, I'm setting up a project template for working with user authentication in the MERN stack. You will learn to register user accounts to a MongoDB database, log in users on the react frontend and verify logged in users. The authentication is secured by technologies such as JsonWebTokens, Bcrypt and HTTP-only cook...
MERN stack secure authentication Part 10 | Saving cookies | JWT, Cookies, Bcrypt, React Hooks.
Переглядів 9 тис.3 роки тому
Updated 2021 MERN stack user authentication tutorial series. In this tutorial series, I'm setting up a project template for working with user authentication in the MERN stack. You will learn to register user accounts to a MongoDB database, log in users on the react frontend and verify logged in users. The authentication is secured by technologies such as JsonWebTokens, Bcrypt and HTTP-only cook...
MERN stack secure authentication Part 9 | Registerform and CORS | JWT, Cookies, Bcrypt, React Hooks.
Переглядів 8 тис.3 роки тому
Updated 2021 MERN stack user authentication tutorial series. In this tutorial series, I'm setting up a project template for working with user authentication in the MERN stack. You will learn to register user accounts to a MongoDB database, log in users on the react frontend and verify logged in users. The authentication is secured by technologies such as JsonWebTokens, Bcrypt and HTTP-only cook...
MERN stack secure authentication Part 8 | React setup | JWT, Cookies, Bcrypt, React Hooks.
Переглядів 7 тис.3 роки тому
Updated 2021 MERN stack user authentication tutorial series. In this tutorial series, I'm setting up a project template for working with user authentication in the MERN stack. You will learn to register user accounts to a MongoDB database, log in users on the react frontend and verify logged in users. The authentication is secured by technologies such as JsonWebTokens, Bcrypt and HTTP-only cook...
MERN stack secure authentication Part 7 | Private endpoints | JWT, Cookies, Bcrypt, React Hooks.
Переглядів 9 тис.3 роки тому
MERN stack secure authentication Part 7 | Private endpoints | JWT, Cookies, Bcrypt, React Hooks.
MERN stack secure authentication Part 6 | Log users in and out | JWT, Cookies, Bcrypt, React Hooks.
Переглядів 8 тис.3 роки тому
MERN stack secure authentication Part 6 | Log users in and out | JWT, Cookies, Bcrypt, React Hooks.
MERN stack secure authentication Part 5 | Registering users | JWT, Cookies, Bcrypt, React Hooks.
Переглядів 9 тис.3 роки тому
MERN stack secure authentication Part 5 | Registering users | JWT, Cookies, Bcrypt, React Hooks.
MERN stack secure authentication Part 4 | Register validation | JWT, Cookies, Bcrypt, React Hooks.
Переглядів 9 тис.3 роки тому
MERN stack secure authentication Part 4 | Register validation | JWT, Cookies, Bcrypt, React Hooks.
MERN stack secure authentication Part 3 | User model | JWT, Cookies, Bcrypt, React Hooks, Context.
Переглядів 8 тис.3 роки тому
MERN stack secure authentication Part 3 | User model | JWT, Cookies, Bcrypt, React Hooks, Context.
MERN stack secure authentication Part 2 | MongoDB | JWT, Cookies, Bcrypt, React Hooks, Context.
Переглядів 10 тис.3 роки тому
MERN stack secure authentication Part 2 | MongoDB | JWT, Cookies, Bcrypt, React Hooks, Context.
MERN stack secure authentication Part 1 | Server setup | JWT, Cookies, Bcrypt, React Hooks, Context.
Переглядів 30 тис.3 роки тому
MERN stack secure authentication Part 1 | Server setup | JWT, Cookies, Bcrypt, React Hooks, Context.
Web development in 2021: a quickstart guide to become a modern web developer
Переглядів 9453 роки тому
Web development in 2021: a quickstart guide to become a modern web developer
New course out! MERN stack complete: full stack apps from scratch with user authentication
Переглядів 4,5 тис.3 роки тому
New course out! MERN stack complete: full stack apps from scratch with user authentication
Learn UseState, UseRef and CSS animation by making a Collapsible component. Beginner level React
Переглядів 22 тис.4 роки тому
Learn UseState, UseRef and CSS animation by making a Collapsible component. Beginner level React
🤖 Build a Javascript Chatbot with speech recognition, and voice synthesis API 🎤🔊
Переглядів 19 тис.4 роки тому
Build a Javascript Chatbot with speech recognition, and voice synthesis API 🎤🔊
React: the basics in 20 min | Learn React | Basics for beginners
Переглядів 23 тис.4 роки тому
React: the basics in 20 min | Learn React | Basics for beginners
Simply the best explanation on Autocomplete that I've found! And I've been looking for it for a few days now. It is not only the autocompletion explanation that is awesome, the CSS styling, code organization, agility on using VSCode, the charismas of the presenter, it all contribute to a great experience and actual learning. Congratulations Devistry! Great work! (the relationship on Absolute and relative, to make the width of the elements match is also something I only understood well now).
How do you redirect to a web page/url when you click on some search result ?
There's a way where we can directly create the Build folder inside a specified folder ("server" folder in our case) instead of manually copy pasting it every time in the server folder. So, is there a specific reason you did not do that?
Truely amazing!!!!!! Thank you so much!
Fantastic Explanation. Thank you :-)
Just because there exists a person like you who is sharing valuable knowledge through youtube, I still come to youtube to learn instead of reading docs
One year later and this is simply the best nextjs tutorial available
Thank you for such a detailed explanation with demonstration. Hope you do more in your upcoming videos.
Thanks a lot!!
Many thanks for sharing this simple but elegant solution!
How would I go about using an MUI button as the base for the component?
you are brillant
Great video, too bad the Github repo is not linked!
It is possible to package this and publish on npm. ?
Thank you so much!! This cleared up my confusion and helped me understand how React works, in a way that no amount of template projects or copy-pasting could do, it's exactly what I needed
aahhh!!! brother... this is exactly what i am searching for the past days, i wish i found your channel earlier... a question for you -- do you ever tried to connect mongodb (running on windows) to our express app (running on wsl). I have tried every single method said in stackoverflow, reddit and others, maybe i didn't done it right. i want you to make a video on that..... Onegashimashu🙏🙏🥺 nee-san
Love this! Thanks :)
Thanks Man!!! You are the best! :))
Thanks for this wonderful tutorial <3
maxAge: 0, also achives the same result as expires: new Date(0)
perfect explanation..
This is just awesome! in just one video you covered a lot of topics (twMerge,CVA,clsx). Thanks a lot for this video. I will watch this multiple times so that everything you showed gets ingrained. Thanks again.
How can this proxy server be added in vite.config.js as it doesn't takes proxy
Excellent video
Thanks for implementing the authentication and authorization the right way by "storing JWT in a http-only cookie" instead of local storage. Also thank you for be brave enough to admit the previous approach of storing JWT in local storage is insecure and therefore wrong. I just don't know why the hell there are so many tutorials online about authentication and authorization which teach to store JWTs in local storage. It is obviously insecure, so just stop teaching this shit. It's very very weird that I had to search alot to find a tutorial on MERN stack which teaches the right way. It seems every body is talking about storing JWTs in local storage shit.
enjoyed watching and coding this one out. Really appreciated ♥
Love the simplicity
This is gold! Thanks
I spent an entire day yesterday trying to figure out Vercel monorepos with no success. Then I tried this - set up in 10 minutes and deployed to Heroku perfectly first time! Game changing!
can we do speech to speech for streaming speech in a angular chatbot application
Thank you dude.
I was looking for some template engine that allows react code (or at least jsx) in my express.js. I'm glad I found THIS so I don't need any jsx-in-express-like solutions
Yah bruh this is dope and literally super smart and the only way to go… also you’re super easy to listen to and I’m stoked to now officially be a subscriber… also why I’m I sitting in the couch writing this in my phone when I could be on the Mac Studio coding rn 😂!
Can you achieve this without using typescript?
Great tutorial! Thank you for this
Please create a new router crash course
Thank you so much
Kindly pls give source code pls
Finally!!! someone who explains the actual use case for react and express
Creating Re-Usable Tailwind Components, so clearly explained. Thank you very much. {2024-05-27} - Subscribed!
Fantastic video! Very well paced. Thanks for not jamming all topics in 10min. It felt like a natural conversation speed. Subscribed.
Are you from Israel brotha?
Caching is generally a difficult stuff
I was looking for something like this too clean up my messy code. Thank you so much for this. Well explained. You are all amazing teacher 😁❤️
thanks for the video
Super helpful video! thanks a ton man!!
pls src code
90% of ypur video, you are showing to us how do you write html code. Do you realy thik that it is so interesting? OMG...
This is fantastic!!, been banging my thick DEV head on a brick wall for the last two months trying to get shopify, react & express- node running in Plesk! This video and the narrator is so articulate and chilled out, 5 Stars and many thanks for taking the time to explain this to us muggins.
Awesome ! Just the thing I was looking for. But could you tell me, if I can do the same with NextJS and NodeJS (ExpressJS)?