- 51
- 346 662
Jolly Coding
United Kingdom
เข้าร่วมเมื่อ 5 ต.ค. 2023
Hi, I'm James. I'm a developer advocate passionate about all things web development, especially TypeScript and React. This channel is a spot for tutorials, tips, and insights on the latest web technologies.
NEW Caching System?! (Next.js Conference 2024)
Next.js Conf 2024 just wrapped up. From the useCache hook to TurboPack's incredible performance improvements, this video breaks down everything I heard at the conference.
Conference Replay: nextjs.org/conf
-------
🐦 Twitter (X): jollycod.ing/x
🤓 Personal Site: jollycod.ing/me
💻 GitHub: jollycod.ing/git
JollyUI: jollycod.ing/ui
Conference Replay: nextjs.org/conf
-------
🐦 Twitter (X): jollycod.ing/x
🤓 Personal Site: jollycod.ing/me
💻 GitHub: jollycod.ing/git
JollyUI: jollycod.ing/ui
มุมมอง: 2 030
วีดีโอ
Next.js 15's BEST Features
มุมมอง 2.3Kหลายเดือนก่อน
Next.js 15 has finally arrived and it offers some great new developer enhancements. I may not be the first to explain these, but lets take a quick look at all the cool new things coming to Next.js 15. nextjs.org/blog/next-15#enhanced-security-for-server-actions 🐦 Twitter (X): jollycod.ing/x 🤓 Personal Site: jollycod.ing/me 💻 GitHub: jollycod.ing/git JollyUI: jollycod.ing/ui
The NEW shadcn/ui Sidebars Are Awesome
มุมมอง 20Kหลายเดือนก่อน
The latest game-changer in React UI components: a set of beautifully designed, incredibly easy-to-use sidebars. Shadcn has insane attention to detail and really put in the work here. Never write your own sidebar from scratch again! shadcn: ui.shadcn.com shadcn twitter: x.com/shadcn 🐦 Twitter (X): jollycod.ing/x 🤓 Personal Site: jollycod.ing/me 💻 GitHub: jollycod.ing/git JollyUI: jollycod.ing/ui
ShadCN CLI - Install ANYTHING from Anywhere
มุมมอง 2K2 หลายเดือนก่อน
ShadCN is becoming a philosophy. Simple, reusable copy and paste components for everything. This new CLI furthers that, allowing you to set up your own code to be easily installed with the CLI, handling the dependencies, and more for you. Lets take a look at how you could do this yourself! ► HACKING SCALE NEWSLETTER jollycod.ing/newsletter ► BetterStack Channel (Find me on there too!) jollycod....
Expo Made React Web-to-Native Migration Easier (Here's How)
มุมมอง 15K3 หลายเดือนก่อน
Expo's new experimental 'use dom' feature allows us to use React DOM components in native super easily. Let's look at how we can implement this directive and why. This should massively help iteration speed with web-to-native. I'll look at the demo repo with examples like MDX and threejs on a native app. Evan Bacon Tweet: x.com/Baconbrix/status/1823366398405415176 Demo GitHub: github.com/EvanBac...
Is this "Next-Generation TypeScript"?
มุมมอง 3.9K3 หลายเดือนก่อน
I was looking for a way to have error handling and observability done well in TypeScript. This is when I stumbled upon Effect TS. It promises to make your TypeScript more robust, making it more composable, reusable and testable. Lets see a demo and my thoughts on it. Ethans Video on Error Handling: th-cam.com/video/1U44SbOa7rE/w-d-xo.html 🐦 Twitter (X): jollycod.ing/x 🤓 Personal Site: jollycod....
Top 5 NEW Features in TypeScript 5.6
มุมมอง 1.3K3 หลายเดือนก่อน
Some exciting new features in TypeScript 5.6! This update introduces powerful iterator helper methods, strict checks for truthy/nullish expressions to catch common bugs, improved performance with region-prioritized diagnostics, the new noCheck and noUncheckedSideEffectImports options, as well as support for arbitrary module identifiers. Lets see how these will enhance the TypeScript development...
NextJS 'use server' Trap (Accidentally Leaking Data)
มุมมอง 10K4 หลายเดือนก่อน
Ever since React moved onto the server, the new directives "use client" and "use server" have caused some confusion. Lets look at how the top level directive in an actions.ts file may leak some data you may not want, and why this is more an issue of developer confusion rather than an issue with NextJS. Rhys Tweet: x.com/RhysSullivan/status/1808039883350704372 🐦 Twitter (X): jollycod.ing/x 🤓 Per...
I Ditched Prettier and ESLint (Here's Why)
มุมมอง 11K5 หลายเดือนก่อน
ESLint and Prettier have been around for ages, and without much competition for their top spot. Biome, has claimed the bounty and offers insane performance improvements as well as some quality of life features, all while being a linter and a formatter in one. Can it rival ESLint and Prettier? Lets find out. Biome: biomejs.dev/ Migrating ESLint and Prettier: biomejs.dev/guides/migrate-eslint-pre...
Why You Should Use React Aria Components...
มุมมอง 16K5 หลายเดือนก่อน
Discover the power of React Aria Components, a headless UI library that ensures accessibility, customization, and a consistent user experience across devices. Lets talk about all the details that React Aria Components implements for you and why you want a headless UI library. See how to style and integrate these components into your projects with ease. React Aria Components: react-spectrum.adob...
The END of Remix?!? - Huge React Announcement
มุมมอง 4.9K6 หลายเดือนก่อน
There has been two main Frameworks, Remix and NextJS. For nearly four years, Remix has been a fullstack framework built on web standards, helping developers build better websites and applications. At React Conf 2024, the Remix team announced that Remix will be sunsetted and its features integrated into React Router v7. In this video, we'll explore why this change makes sense and what it means f...
Why I LOVE Open-Source!
มุมมอง 1K6 หลายเดือนก่อน
I wanted to explore my process of learning. This is the beginning stages, covering getting an idea to proving it is possible with a proof of concept, and then iterating on it when possible. I go over how I integrated Web and PDF search to my AI chatbot, as well as real-time F1 information, using existing open-source projects. I also go over the areas I failed in this, and what I can learn from ...
Type-Safe Environment Variables in JavaScript
มุมมอง 9066 หลายเดือนก่อน
In JavaScript land you can use process.env or import.meta.env to load in your environment variables. The problem is, theres no type checking on this by default and no build time checking that it exists. T3 Env solves this and allows us to get autocomplete, type-safety and more for our environment variables with nice error messages for when things go wrong. T3 Env Docs: env.t3.gg/docs/introducti...
TypeScript FINALLY fixed this...
มุมมอง 15K7 หลายเดือนก่อน
TypeScript 5.5 is coming and it promises to solve a massive developer experience issue thats been with us for a while. We're getting inferred type predicates, control flow narrowing for indexed accessess and regex syntax checking! Announcement Blog Post: devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/ 🐦 Twitter (X): jollycod.ing/x 🤓 Personal Site: jollycod.ing/me 💻 GitHub: jol...
Supabase and NextJS 14: Auth and Server Actions
มุมมอง 26K7 หลายเดือนก่อน
Supabase is an awesome, open-source alternative to Firebase. Using it you can handle databases, auth and storage as well. Lets look at how we can do this on the Server Side, using NextJS, Email Login, oAuth Login (Github, Google etc). After, we will look at some of the React 19 / NextJS Features to handle forms, useFormStatus and useOptimistic to make out site a great user experience. Starter C...
NEW Drag and Drop Library for ANY framework
มุมมอง 11K7 หลายเดือนก่อน
NEW Drag and Drop Library for ANY framework
STOP using Layouts for Authentication!
มุมมอง 24K7 หลายเดือนก่อน
STOP using Layouts for Authentication!
NextJS 14 Markdown Blog (Part 2): Adding Topic Tags
มุมมอง 2.3K8 หลายเดือนก่อน
NextJS 14 Markdown Blog (Part 2): Adding Topic Tags
TailwindCSS V4 Update Makes UI libraries easier
มุมมอง 2.2K8 หลายเดือนก่อน
TailwindCSS V4 Update Makes UI libraries easier
NextJS 14 Markdown Blog: TypeScript, Tailwind, shadcn/ui, MDX, Velite,
มุมมอง 34K8 หลายเดือนก่อน
NextJS 14 Markdown Blog: TypeScript, Tailwind, shadcn/ui, MDX, Velite,
This is the FUTURE for User Experience
มุมมอง 14K8 หลายเดือนก่อน
This is the FUTURE for User Experience
10 Open-Source NextJS Projects to Learn From
มุมมอง 2.3K9 หลายเดือนก่อน
10 Open-Source NextJS Projects to Learn From
Code Cleanup Made Easy... Remove JavaScript Exports, Files & Dependencies
มุมมอง 3.5K10 หลายเดือนก่อน
Code Cleanup Made Easy... Remove JavaScript Exports, Files & Dependencies
Amazings Legos ! and video too
That's interesting. On my mind we can also use that database info to work on an API with Next.js. I like Firebase's easy setup and functional simplicity. Good work.
big thanks bro
Do you know how to solve this error in NextJS15? Unhandled Runtime Error Error: invariant expected layout router to be mounted
it will reach the general public
Genuinely useful and well-explained in comparison to a lot of the nextjs slop on youtube.
I like your content because it comes through that you're a real expert, and you get to the point fast and clearly! Thank you. Here's a request for more Nextjs videos! Perhaps Nextjs+Supabase. I'm struggling with performance issues with Supabase recommending getUser calls in middleware.
damn I'm sold on the buttons 😆, who would have thought
A more resource-intensive, more complicated RxJS. Interesting, like many fp-ish (foppish? lol) libraries and concepts are to me, but I think I will stick to tan stack and leaving my options open, building with the best current library (or none) for the problem at hand, as opposed to the one-size-fits-all, one-library-to-rule-them-all, do-everything-the-effect-way that effect strongly insists on. Also, the namespace is just an awful decision in the context of React.
It would have been nice to see how you protect routes at the middleware level
why nobody talks about why you shouldn't use it? 1. styling 2. maintenance 3. time if you have a small project or a small team, DON'T use pure headless UI, go with something prebuilt like NextUI, Radix etc. Don't waste time on a custom styling, don't waste time on a maintenance and bug fixing. Time is money
This is pretty cool! Gonna try it now Also FYI, I was calling it "Nip" too but it's actually with a hard K I found this at the bottom of their github repo th-cam.com/video/PE7h7KvQoUI/w-d-xo.html
With Nextjs 15 theres no next.config.mjs, instead is .ts, but the velite's integration doesn´t have types, i hope they add it soon
could someone here give me the title of color theme being used please
GitHub Dark
how to create this project using expo dom. I fork this repo I got errror:--- ------------------------------------------------------------------------------------------------- D:\Users\expo-dom-components-canary-example>npm i npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: mdex@1.0.0 npm error Found: expo@52.0.0-preview.3 npm error node_modules/expo npm error expo@"52.0.0-preview.3" from the root project npm error npm error Could not resolve dependency: npm error peer expo@"52.0.0-canary-20240912-1059f85" from @expo/dom-webview@0.0.1-canary-20240912-1059f85 npm error node_modules/@expo/dom-webview npm error @expo/dom-webview@"^0.0.1-canary-20240912-1059f85" from the root project npm error peerOptional @expo/dom-webview@"*" from expo@52.0.0-preview.3 npm error node_modules/expo npm error expo@"52.0.0-preview.3" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error C:\Users aved\AppData\Local pm-cache\_logs\2024-10-30T07_49_34_087Z-eresolve-report.txt npm error A complete log of this run can be found in: C:\Users aved\AppData\Local pm-cache\_logs\2024-10-30T07_49_34_087Z-debug-0.log
How to use this in angular any reputed site is available?
Can someone tell to shadcn we need navbar components 😂😂😂
node js runtime support for middleware , A game changer for selfhosting applications , I've run into lot of issues setting up auth check on middleware due to edge runtime shitss
literally had to rewrite all my auth strategy today working with older v of next
i don’t understand how they will allow partial pre-rendering to work outside their infra
Other hosting providers will need to support their infra for nextjs features. For example cloudflare is making an effort on opennext to be able to support hosting nextjs as intended
@@dominykasastrauskas this is not always an option for enterprise. like in my use case this needs to work on docker cause we use kubernetes
@@MrZiyak99 I'm in the same boat here brother! However we have CF so maybe CF infra will be an option in the future. Anyway, as I was deep diving into performance issues of the app router pre next v15, the power of Next is almost always - infrastructure. However, I saw some raw app router SSR performance. Will be looking forward to upgrading
Great video. IMO Next 16 needs to focus on expanding their RPC to include a proper fetching procedure. You can use Server Actions to fetch, but they're still POST requests and there are issues with caching. Rob Lee and other Next team members have repeatedly stated that Server Actions are not meant for fetching, so... why not? Server Functions in TanStack Start are so cool (even if GET requests are technically two requests, a POST to trigger the RPC and a GET for the result) and certainly where Next should be heading. Let me know what you think.
Do you like the style of video? First time trying out an animation heavy video. Did mean that I couldn't get it out as quick as I wanted! All about learning though!
This is amazing, I loved it and as a beginner and visual learner the animations helped me immediately understand the feature, why it's an improvement, and how to use it! Thanks man If you don't mind me asking, how did you create those animations?
@r34ct4 I used Remotion + Code Hike for animating code changes, and v0/Framer motion for everything else, just recorded the screen!
For those who want to use it with React Router, you just need to change all `a` tags with the `Link` RR's component, and `href` with `to` prop.
Can't build if useSearchParams is used, you need to wrap it in React.Suspense which becomes complex. Use nuqs insted
Nuqs is on my todo list for videos, discovered it after this and it’s an awesome tool. This and tanstack routers way of doing things.
I was planning to rewrite my 2022 blog site and wanted a better eco-system of tech stack which worked for my use-case. This video really helped me set the core foundational code in my project - thanks @Jolly Coding. I specially dig the Velite - takes care of bunch of scripts that I would have to write 😀
I am using next js 15 and tried dashboard02 but the collapsible.tsx is missing in components/ui I have it now but it's not the same in the shadcn preview nice vid bro❤
i think shadcn is only missing a better toaster alert template
I like to use sonner. Works like a charm
I mean it’s totally not a shadcn thing either ha. It’s radix which I hate
Sonner is the best
@@XIIOSRS i personally use react-toastify
@@XIIOSRS react hot toast can also be an alternative
Is it just me, or does anyone else can't install the sidebar? It throws a not found error with the app/global.css file. 😖
i experience same issue just now, can install it getting the error found in app/glolbal.css file
Had a similar issue that got cleared by removing comments from the global.css file.
We need to break the norm of having bare minimum examples, we need more fully featured examples from these components and i am happy shadcn decided to do this. With all the AI madness around we need more content like this to be normalized so we can work on a decent baseline.🎉🎉
these are awesome! but imho shadcn should focus in creating components that are currently lacking instead of creating blocks... i.e.: we dont have a functional pagination component in shad
Senna GOAT
You might be the first commenter to acknowledge my F1 background!
Thanks
Are they coming to JollyUI?
Might be able to have a few of the examples. Need to find the time to add them!
Great tutorial! One concern, at 17:00, you add revalidatePath when a user logs in. Won't this clear cache for all app users every time a login occurs, since you're clearing the root layout and all its children?
Svelte 5 was also released yesterday.
It’s on my todo list to talk about! Looks really good, and I personally like runes a lot.
@@JollyCoding I have some confusion as svelte 5 is released the best way to build app with svelte is sveltekit do we get svelte 5 support in Sveltekit too.
Is it pronounced Hermies or Hermes? 😂
Do you think these blog posts will rank in google ?
Prisma integration would've been optimal.
Can u make a video explaining how to add role based access control?
Hello great conent, i would like to ask about how we can import custom component dependencies .
It is showing the error of src can't be of type arraybuffer I am using the ts-nocheck but still the same issue
Sonner and Drawer are not featured on the actual website.
it does not work perfectly when it's finds jsconfig.json !
Doesn't NextUI also use react aria under the hood? Though i think is not as lightweight as the options you mentioned since it also uses framer motion for some animations.
This is such a great tutorial @JollyCoding. Thank you so much for this as I have been trying to find a solution for MDX to Nextjs and coming across your tute was awesome. However, This bit of code in the Blog Page, which builds up the list of blog posts, gives me an error on the displayPosts.map part below: displayPosts.map((markdowns: { slug: string; title: string; }) => { const {slug, date, title, description} = markdowns return (<li key={slug}> . . </li> /> ) })} And the error is : Type 'Element | { displayPosts: ({ slug: string; title: string; description: string; body: string; } & { slugAsParams: string; })[]; "": any; }' is not assignable to type 'ReactNode'. Object literal may only specify known properties, and 'displayPosts' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.ts(2322)" Would really appreciate any help to resolve this and has anyone else also faced the same. I'm using Nextjs 14.2.1 and React/ ReactDom 18. Thank you
Just self correcting here = remove any { before the start of this line and the error goes away.
Why not handle all redirections from the middleware instead of importing the same code of user data from supabase to verify !user?
If you thought using wget or curl to pull in code from a random URL and then blindly execute it on your workstation was a good idea you'll love the new cli
The new update does not have this
It’s under the blocks tab now. Or have I misunderstood?
really interesting
Any idea why the devDependencies arent being installed? { name: 'codeSnippet', type: 'registry:ui', dependencies: ['react-syntax-highlighter'], registryDependencies: ['alert-dialog', 'button'], devDependencies: ['@types/react-syntax-highlighter'], files: [ { path: 'ui/codeSnippet/index.tsx', target: 'components/breeze-ui/codeSnippet.tsx', type: 'registry:page' } ] }
i really like this, add search feature, and add image content in blog bro, please