Jolly Coding
Jolly Coding
  • 51
  • 346 662
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
มุมมอง: 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!
Weird and Funny JavaScript Quirks
มุมมอง 1.4K7 หลายเดือนก่อน
Weird and Funny JavaScript Quirks
This UI Library Update is AWESOME!
มุมมอง 3.9K7 หลายเดือนก่อน
This UI Library Update is AWESOME!
NextJS 14 Markdown Blog (Part 2): Adding Topic Tags
มุมมอง 2.3K8 หลายเดือนก่อน
NextJS 14 Markdown Blog (Part 2): Adding Topic Tags
A UNIQUE Way to Write React
มุมมอง 4648 หลายเดือนก่อน
A UNIQUE Way to Write React
TailwindCSS V4 Update Makes UI libraries easier
มุมมอง 2.2K8 หลายเดือนก่อน
TailwindCSS V4 Update Makes UI libraries easier
STOP using outer margins
มุมมอง 2.4K8 หลายเดือนก่อน
STOP using outer margins
NextJS 14 Markdown Blog: TypeScript, Tailwind, shadcn/ui, MDX, Velite,
มุมมอง 34K8 หลายเดือนก่อน
NextJS 14 Markdown Blog: TypeScript, Tailwind, shadcn/ui, MDX, Velite,
This UI Library is AWESOME
มุมมอง 1.6K8 หลายเดือนก่อน
This UI Library is AWESOME
This is the FUTURE for User Experience
มุมมอง 14K8 หลายเดือนก่อน
This is the FUTURE for User Experience
What's NEW in React 19
มุมมอง 6679 หลายเดือนก่อน
What's NEW in React 19
Create a React App in 2024
มุมมอง 2.9K9 หลายเดือนก่อน
Create a React App in 2024
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

ความคิดเห็น

  • @germanderbescatoni6905
    @germanderbescatoni6905 22 ชั่วโมงที่ผ่านมา

    Amazings Legos ! and video too

  • @rnavedojr
    @rnavedojr 6 วันที่ผ่านมา

    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.

  • @shing19
    @shing19 9 วันที่ผ่านมา

    big thanks bro

  • @doob4611
    @doob4611 10 วันที่ผ่านมา

    Do you know how to solve this error in NextJS15? Unhandled Runtime Error Error: invariant expected layout router to be mounted

  • @jisonsoft4810
    @jisonsoft4810 11 วันที่ผ่านมา

    it will reach the general public

  • @zeeshaanlakdawala3361
    @zeeshaanlakdawala3361 13 วันที่ผ่านมา

    Genuinely useful and well-explained in comparison to a lot of the nextjs slop on youtube.

  • @zeeshaanlakdawala3361
    @zeeshaanlakdawala3361 13 วันที่ผ่านมา

    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.

  • @chad_giga6934
    @chad_giga6934 16 วันที่ผ่านมา

    damn I'm sold on the buttons 😆, who would have thought

  • @AvanaVana
    @AvanaVana 18 วันที่ผ่านมา

    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.

  • @MersiliaWax
    @MersiliaWax 21 วันที่ผ่านมา

    It would have been nice to see how you protect routes at the middleware level

  • @SergiySev
    @SergiySev 22 วันที่ผ่านมา

    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

  • @ryuichimiyazaki5620
    @ryuichimiyazaki5620 26 วันที่ผ่านมา

    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

  • @alexiizz1222
    @alexiizz1222 26 วันที่ผ่านมา

    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

  • @alekseyr8372
    @alekseyr8372 28 วันที่ผ่านมา

    could someone here give me the title of color theme being used please

    • @JollyCoding
      @JollyCoding 28 วันที่ผ่านมา

      GitHub Dark

  • @newadClass
    @newadClass หลายเดือนก่อน

    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

  • @anandu06
    @anandu06 หลายเดือนก่อน

    How to use this in angular any reputed site is available?

  • @abdikhanihassan
    @abdikhanihassan หลายเดือนก่อน

    Can someone tell to shadcn we need navbar components 😂😂😂

  • @mohammedanas8637
    @mohammedanas8637 หลายเดือนก่อน

    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

    • @pavlotsyhanok4843
      @pavlotsyhanok4843 18 วันที่ผ่านมา

      literally had to rewrite all my auth strategy today working with older v of next

  • @MrZiyak99
    @MrZiyak99 หลายเดือนก่อน

    i don’t understand how they will allow partial pre-rendering to work outside their infra

    • @dominykasastrauskas
      @dominykasastrauskas หลายเดือนก่อน

      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

    • @MrZiyak99
      @MrZiyak99 หลายเดือนก่อน

      @@dominykasastrauskas this is not always an option for enterprise. like in my use case this needs to work on docker cause we use kubernetes

    • @dominykasastrauskas
      @dominykasastrauskas หลายเดือนก่อน

      @@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

  • @derproka
    @derproka หลายเดือนก่อน

    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.

  • @JollyCoding
    @JollyCoding หลายเดือนก่อน

    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!

    • @r34ct4
      @r34ct4 หลายเดือนก่อน

      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?

    • @JollyCoding
      @JollyCoding หลายเดือนก่อน

      @r34ct4 I used Remotion + Code Hike for animating code changes, and v0/Framer motion for everything else, just recorded the screen!

  • @DiogoLScarmagnani
    @DiogoLScarmagnani หลายเดือนก่อน

    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.

  • @sudu-boi
    @sudu-boi หลายเดือนก่อน

    Can't build if useSearchParams is used, you need to wrap it in React.Suspense which becomes complex. Use nuqs insted

    • @JollyCoding
      @JollyCoding หลายเดือนก่อน

      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.

  • @Vaibhavdod-aka-Vibbs
    @Vaibhavdod-aka-Vibbs หลายเดือนก่อน

    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 😀

  • @ikebelida2957
    @ikebelida2957 หลายเดือนก่อน

    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❤

  • @ulrich-tonmoy
    @ulrich-tonmoy หลายเดือนก่อน

    i think shadcn is only missing a better toaster alert template

    • @NubeBuster
      @NubeBuster หลายเดือนก่อน

      I like to use sonner. Works like a charm

    • @AtomicPixels
      @AtomicPixels หลายเดือนก่อน

      I mean it’s totally not a shadcn thing either ha. It’s radix which I hate

    • @XIIOSRS
      @XIIOSRS หลายเดือนก่อน

      Sonner is the best

    • @ulrich-tonmoy
      @ulrich-tonmoy หลายเดือนก่อน

      @@XIIOSRS i personally use react-toastify

    • @abdasisdev
      @abdasisdev 13 วันที่ผ่านมา

      @@XIIOSRS react hot toast can also be an alternative

  • @alastrat
    @alastrat หลายเดือนก่อน

    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. 😖

    • @okechukwuuchenna7725
      @okechukwuuchenna7725 หลายเดือนก่อน

      i experience same issue just now, can install it getting the error found in app/glolbal.css file

    • @RayDenis
      @RayDenis หลายเดือนก่อน

      Had a similar issue that got cleared by removing comments from the global.css file.

  • @nove1398
    @nove1398 หลายเดือนก่อน

    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.🎉🎉

  • @GuilhermeFaxina-r5q
    @GuilhermeFaxina-r5q หลายเดือนก่อน

    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

  • @RafaelRodrigues-ur3gq
    @RafaelRodrigues-ur3gq หลายเดือนก่อน

    Senna GOAT

    • @JollyCoding
      @JollyCoding หลายเดือนก่อน

      You might be the first commenter to acknowledge my F1 background!

  • @alexg7282
    @alexg7282 หลายเดือนก่อน

    Thanks

  • @madmaxdev
    @madmaxdev หลายเดือนก่อน

    Are they coming to JollyUI?

    • @JollyCoding
      @JollyCoding หลายเดือนก่อน

      Might be able to have a few of the examples. Need to find the time to add them!

  • @andrewmcburney4425
    @andrewmcburney4425 หลายเดือนก่อน

    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?

  • @prashlovessamosa
    @prashlovessamosa หลายเดือนก่อน

    Svelte 5 was also released yesterday.

    • @JollyCoding
      @JollyCoding หลายเดือนก่อน

      It’s on my todo list to talk about! Looks really good, and I personally like runes a lot.

    • @prashlovessamosa
      @prashlovessamosa หลายเดือนก่อน

      @@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.

  • @davidlintin
    @davidlintin หลายเดือนก่อน

    Is it pronounced Hermies or Hermes? 😂

  • @brohands-je9gg
    @brohands-je9gg หลายเดือนก่อน

    Do you think these blog posts will rank in google ?

  • @rohanverma9495
    @rohanverma9495 หลายเดือนก่อน

    Prisma integration would've been optimal.

  • @tukojs
    @tukojs หลายเดือนก่อน

    Can u make a video explaining how to add role based access control?

  • @antonischalkias
    @antonischalkias หลายเดือนก่อน

    Hello great conent, i would like to ask about how we can import custom component dependencies .

  • @sauravsingh4497
    @sauravsingh4497 หลายเดือนก่อน

    It is showing the error of src can't be of type arraybuffer I am using the ts-nocheck but still the same issue

  • @hotsauceasylum
    @hotsauceasylum หลายเดือนก่อน

    Sonner and Drawer are not featured on the actual website.

  • @programmersohel
    @programmersohel หลายเดือนก่อน

    it does not work perfectly when it's finds jsconfig.json !

  • @estebanmurcia8451
    @estebanmurcia8451 หลายเดือนก่อน

    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.

  • @uruthrak
    @uruthrak หลายเดือนก่อน

    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

    • @uruthrak
      @uruthrak หลายเดือนก่อน

      Just self correcting here = remove any { before the start of this line and the error goes away.

  • @yacinebenzi
    @yacinebenzi 2 หลายเดือนก่อน

    Why not handle all redirections from the middleware instead of importing the same code of user data from supabase to verify !user?

  • @furycorp
    @furycorp 2 หลายเดือนก่อน

    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

  • @jefferyirenkyi
    @jefferyirenkyi 2 หลายเดือนก่อน

    The new update does not have this

    • @JollyCoding
      @JollyCoding 2 หลายเดือนก่อน

      It’s under the blocks tab now. Or have I misunderstood?

  • @flozero
    @flozero 2 หลายเดือนก่อน

    really interesting

  • @Vir7uaLGameplays
    @Vir7uaLGameplays 2 หลายเดือนก่อน

    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' } ] }

  • @teguhbagasmardiansyah
    @teguhbagasmardiansyah 2 หลายเดือนก่อน

    i really like this, add search feature, and add image content in blog bro, please