CodeSnaps
CodeSnaps
  • 16
  • 95 052
World's Shortest Next.js Course
This is the shortest Next.js course you'll ever take. Learn how to create a new Next.js app, style it, create pages and routes, fetch data, implement streaming and loading stages, create custom route handlers, custom error pages, and more.
### 📚 Materials/References:
Code: github.com/CodeSnaps/worlds-shortest-nextjs-course
### 👨🏻‍💻 Here’s What You’ll Learn
- What is Next.js?
- How to create a new Next.js app
- How to style your Next.js app
- How to switch fonts
- How to set SEO metadata
- How to create pages and routes
- How to create dynamic routes
- How to fetch data using server components
- Difference between client and server components
- How to create custom route handlers
- How to stream data and components
- How to create a custom 404 page and error page
### 👇 Timestamps:
00:00 Intro
00:30 Setup & Installation
01:30 Styling
02:52 Fonts
03:22 SEO
04:10 Pages and Routes
05:24 Layout Component
06:08 Data Fetching
06:39 Client Component
07:12 Route Handlers
08:08 Streaming and Loading UI
09:24 Custom Error and 404
10:54 Conclusion
มุมมอง: 58

วีดีโอ

Everything You Need to Know about Streamlit
มุมมอง 7921 วันที่ผ่านมา
Learn how to turn your Python scripts into web apps using Streamlit. Streamlit is a Python library that makes it easy to create and share beautiful, custom web apps for machine learning and data science. No experience in HTML, CSS, or JavaScript is required. 📚 Materials/References: Code: github.com/CodeSnaps/streamlit-crash-course 👨🏻‍💻 Here’s What You’ll Learn - What is Streamlit - How to insta...
Build Charts in React With Recharts in 7 Minutes
มุมมอง 23K9 หลายเดือนก่อน
Learn how to create beautiful charts in React with Recharts, a charting library built specifically for React. Once you understand how to create one chart, you can pretty much create any chart you can imagine. 📚 Materials/References: Code: github.com/CodeSnaps/recharts-library 👨🏻‍💻 Here’s What You’ll Learn - What is Recharts - How to install Recharts - How to create an area chart, bar chart, and...
Build Stunning Documentation With React & Docusaurus (Complete Guide)
มุมมอง 18K11 หลายเดือนก่อน
Learn how to create stunning documentation in minutes with React and Docusaurus. Spend more time building your product and less time writing your documentation. 📚 Materials/References: Code: github.com/CodeSnaps/docusaurus-guide Here’s What You’ll Learn 👨🏻‍💻 - What is Docusaurus - Install Docusaurus - Creating your own documentation - MDX (Markdown JSX) - Import components into Markdown - Using...
The Only JavaScript Cheat Sheet You Need (For Beginners & Pros)
มุมมอง 778ปีที่แล้ว
Welcome to the ultimate JavaScript cheat sheet, your go-to resource to reference and look up everything from the basics to advanced techniques in JavaScript! 👨🏻‍💻 Here's what you'll learn: - Comments - Console - Variables - Numbers - Booleans - Strings - Assignment Operators - Conditionals - Functions - Scope - Arrays - Array Methods - Iterators - Loops - Objects - Classes - Modules - Promises ...
Next.js 13 Changed Data Fetching and Rendering... But Is It Good?
มุมมอง 7Kปีที่แล้ว
What's the difference between app router, page router, static site generation, static rendering, server-side rendering, dynamic rendering, incremental static regeneration, server components, client components, getStaticProps, getServerSideProps, getStaticPaths, generateStaticParams, and hydration? 📚 Materials/References: Server & Client Components: th-cam.com/video/aoHK8skFZ1U/w-d-xo.html 👨🏻‍💻 ...
Everything You Need to Know About Server Components in Next.js 13
มุมมอง 23Kปีที่แล้ว
With the release of Next.js 13, Next.js officially supports React server components, and here's everything you need to know about server components so you can start building better, faster apps right away. 📚 Materials/References: Code: github.com/CodeSnaps/react-server-components 👨🏻‍💻 Here's what you'll learn: - What are server components - The difference between server and client components - ...
Beautiful Password Generator using only HTML, CSS, and JavaScript | Step-by-Step Tutorial
มุมมอง 165ปีที่แล้ว
Use only HTML, CSS, and JavaScript to create a beautiful password generator. We'll cover everything from creating a colored character-length slider, implementing toggles for including numbers and symbols, copying the password to the clipboard, and even adding a password strength meter. 📚 Materials/References: Full Repository: github.com/CodeSnaps/password-generator-vanilla-js Full HTML Code: gi...
Next.js 13 & Tailwind CSS: Build an Amazing Tip Calculator App in Minutes!
มุมมอง 1.1Kปีที่แล้ว
Build an amazing tip calculator app using Next.js 13 and Tailwind CSS with a step-by-step process to create a fully functional tip calculator app from scratch. Key Takeaways: - Set up a Next.js 13 project and configure Tailwind CSS - Implement server-side and client-side rendering in Next.js 13 - Use the production-ready app router - Build a responsive tip calculator app with a user-friendly in...
Animated Search Bar with HTML, CSS, & JavaScript | Interactive and Engaging UI
มุมมอง 771ปีที่แล้ว
Search bars are boring, but you can take the user experience to the next level by making them interactive and animated using only HTML, CSS, and JavaScript 💻 📚 Materials/References: Full Repository: github.com/CodeSnaps/animated-search-bar CSS Code: github.com/CodeSnaps/animated-search-bar/blob/main/css/style.css 👨🏻‍💻 Here's what you'll learn: - Create an animated search bar - Use only HTML, CS...
How to Implement Dark Mode in React/Next.js Using Sass
มุมมอง 3Kปีที่แล้ว
How to Implement Dark Mode in React/Next.js Using Sass

ความคิดเห็น

  • @SRIKANTH-tt6em
    @SRIKANTH-tt6em 3 วันที่ผ่านมา

    Thank you very much for your knowledge sharing sir, finally i made my project works perfect this method. Actually i`m working on a React project with Tailwind Css. It Works perfect. Thank you Sir !!!

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

    Such a great video!! Keep it up man 👨‍💻

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

      Thanks a lot!

  • @adnensoltani4930
    @adnensoltani4930 8 วันที่ผ่านมา

    sadly we are living in weird harsh world

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

    Great video

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

    simple and thoroughly explained. Thnks man

  • @mr.fortyfour9722
    @mr.fortyfour9722 11 วันที่ผ่านมา

    Can u also explain how do add a new sidebar, i am trying it but isnt works

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

    @3:15 How did you jump to the folder structure? Could you pls explain? I have locally hosted docusaurus website but can't find the folder structure.

  • @alexdin1565
    @alexdin1565 24 วันที่ผ่านมา

    but how we can get the value from the client component to a server component?

  • @ryldy787gekerz9
    @ryldy787gekerz9 24 วันที่ผ่านมา

    good one i might use it thank you

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

    Excellent total. Broke it into understandable steps. Then made it clear once you know the foundation, it becomes easy mode. Well done and thanks.

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

    That was super useful and perfect pace..

  • @sad.story_
    @sad.story_ หลายเดือนก่อน

    ❤❤❤❤

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

    Awesome explanation,💫🔥💯❤️🌟

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

    Thanks

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

    Super and Quick Resolution to recharts thanks so much

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

    Thanks

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

    Thanks you so much ! You are great

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

    I am your subscriber now. Kindly post something awesome like this

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

    plz make more videos on charts and dashboards json data plz

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

    Really helpful, Kaumon! Thanks for creating and sharing this wonderful resource.

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

    Jesus, would it kill them to make an interface?!

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

    Thank you , thank you and thank you. You just completely cleared all of my doubts regarding this topic.

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

    Mann..this video is soooo underrated

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

    What is your icon theme? It looks so good!

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

    If you have a Typescript error with <Tooltip content={<CustomTooltip />} /> you have to add : - Import TooltipProps from "recharts" - import { ValueType, NameType, } from "recharts/types/component/DefaultTooltipContent"; Finally : const CustomTooltip = ({ active, payload, label, }: TooltipProps<ValueType, NameType>) => {....

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

    Very helpful, thank you!

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

    Great tutorial, just as needed !!!

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

    appreciate the quality of the content

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

    docusaurus doesn't seem to have a search bar. If I have lot's of documents, I won't be able to search them.

    • @GuidoJansen-yk7ne
      @GuidoJansen-yk7ne 5 หลายเดือนก่อน

      It has built-in Algolia search. It's disabled by default that's why you didn't see it in the demo. Instructions on how to enable it can be found in the docs 😊

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

    Hi. I have a question for you. How to customize the data in YAxis ?

  • @user-et2ip6cu8e
    @user-et2ip6cu8e 5 หลายเดือนก่อน

    that's amazing video on next js Data Fetching and comparison between next 12 vs 13. well done. Thank you for sharing your knowledge on such a this simple and easy way

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

    hey! that was a very nice and super quick walkthrough , thank you so much for this!❤ you got a sub

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

    Very helpful explanation !! Is there a way to mimic getInitialProps in next 13?

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

    cool video but I can hear mouth noises - if you fixed your audio you would get way more subs. Steal fireships audio setup lol

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

    How can I customize the background/hvoer color of a bar group when I hover over them in a bar graph?

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

    😘

  • @ShubhamYadav-tu2sc
    @ShubhamYadav-tu2sc 6 หลายเดือนก่อน

    thankyou that's what i was looking for

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

    That really helps man, thanks !

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

    thanks

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

    Спасибо, друг!!!

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

    Thanks for this amazing guide. What do you suggest if i should use a WordPress for my blogs or use docusaurus for both my documentation and blogs

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

    Very nice explanation

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

    Fantastic tutorial 🔥 Thank you for sharing 🍻

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

    This was an amazing introduction and feature walk through. I've been struggling to understand exactly what docusaurus does without reading the docs. This did it for me.

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

    Can I use this on my react project without next.js?

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

      Yes, absolutely. It's 100% the same as in this video

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

    Great video. it was easy to follow. Instant subscribe. I have a question tho. In BarChart, How to control the bg fill of the CartesianGrid on hover? <Bar type="monotone" dataKey="revenue" stroke="#2563eb" fill="#3b82f6" activeBar={<Rectangle fill="#3069D1" stroke="#2155C0" />} // we can control the individual bar like this on hover /> / but the grid turn white and it's doesn't look good.

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

      NeverMind got it <Tooltip content={<CustomTooltip />} cursor={{ fill: '#fff', fillOpacity: 0.075 }} />

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

    help. how to make tooltip scrollable?

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

    Thanks bro ! Amazing video and so helpful. Keep going !

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

    I’m so scared by this I dunno if You’re just speaking random words or if this Is Overt terrorism

  • @user-sw4ed4gh9n
    @user-sw4ed4gh9n 8 หลายเดือนก่อน

    6:00