Next.js 13 Crash Course Tutorial #7 - Dynamic Segments (Params)

Поділитися
Вставка
  • Опубліковано 11 вер 2024
  • In this Next 13 tutorial series, you'll learn the basics of Next.js to make a simple project, using the new app router & server components.
    🚀🥷🏼Access the entire Next.js 13 Masterclass course on Net Ninja Pro:
    netninja.dev/p...
    ➡️ Use promo code NEXTNINJA50 for 50% off!
    📂🥷🏼 Access the course files on GitHub:
    github.com/iam...
    📂🥷🏼 CSS File from course files:
    github.com/iam...
    💻🥷🏼 React Tutorial:
    netninja.dev/p...
    🔗🥷🏼 Next.js docs - nextjs.org/docs
    🔗🥷🏼 CSS modules in Next.js - nextjs.org/doc...
    🔗🥷🏼 VS Code - code.visualstu...

КОМЕНТАРІ • 37

  • @by_huy
    @by_huy 10 місяців тому +1

    Absolute gold mine, I bought your Next.js masterclass course and so far i'm loving it. Also, are you considering on making a crash course towards more of Nextjs13 using searchParams, etc. and contentful? Would love to see an updated series on Next 13 and Contentful

  • @JimmyJazz5964
    @JimmyJazz5964 Рік тому +6

    It's fantastic what you do, by the way! I've learned much from you.

  • @rafiashan8389
    @rafiashan8389 Місяць тому

    Such an awesome series. Coming here after completing react series. Amazing Shaun. Keep it up !

    • @NetNinja
      @NetNinja  Місяць тому

      Thanks a ton! :)

  • @acodersjourney
    @acodersjourney 10 місяців тому +1

    I've learned so much from your videos. Keep inspiring us.

  • @chyas4770
    @chyas4770 8 місяців тому +2

    came here to save anyone confused why their dynamic id is not working. you should check that you use only strings of numbers not numbers

  • @alexg7282
    @alexg7282 Рік тому

    I love the way you explain things ! Thx

  • @activemindsgamer
    @activemindsgamer 4 місяці тому

    The Link at the end does not work. I even copied the code straight from your repo. Might be I am using too new a version so the question might be what is the correct way to implement if not as you have it? ...Beyond that this is the second course of yours I have done and I LOVE the way you explain things. GREAT WORK!!!!

  • @1birr2023
    @1birr2023 Рік тому +2

    Thanks alot. Could you make more videos on vue.js composition api ?

  • @user-kl7zh8qg4n
    @user-kl7zh8qg4n 9 місяців тому

    You are absolute genius

  • @xanmoydev
    @xanmoydev Рік тому

    Thank you so much🙏
    I'm from India🇮🇳

  • @user-lg9on9bm7c
    @user-lg9on9bm7c Рік тому +1

    Make tutorials on Astro framework please.😅

  • @MiraGenije
    @MiraGenije 7 місяців тому

    Why do we need to call twice time async/await for the same request?

  • @MdNaimurRahmanHera
    @MdNaimurRahmanHera 11 місяців тому

    This is awesome sir ❤❤❤❤😍😍

  • @apostoloskyrgidis8715
    @apostoloskyrgidis8715 5 місяців тому

    Does this work on next js 14? Cause I think that you can't pass dynamic hrefs inside Link in that version

  • @codedjango
    @codedjango Рік тому

    @0:01....thanks Shaun for this series...however, I have a question...is that "next: { revalidate: 0}" object (on line 3) available in axios too if I use it instead of fetch? ....thanks once again 👍

    • @NetNinja
      @NetNinja  Рік тому +4

      Hey, instead of adding the revalidate option to the fetch, you can add a line at the top of the file for similar results if you use Axios or some other 3rd party: export const revalidate = 3600 . See here for more info - nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-third-party-libraries

  • @abdulnafay0117
    @abdulnafay0117 Рік тому

    Love your videos shawn. I am building a site using nextjs13 and came across a scenario which requires dynamic routing. I used the same logic you have used but the issue I am facing is everything works on local host but the page doesnt exist in development (on vercel). It gives me 404. Page doesnt exist. Any ideas how to resolve this?

  • @yazidthedev4281
    @yazidthedev4281 Рік тому

    God bless you.

  • @JimmyJazz5964
    @JimmyJazz5964 Рік тому

    This may be a silly question but: how would I get alerts for when you issue your upcoming videos? This is the first time I've followed an up-to-date tutorial so have never had the need for alerts before.

    • @NetNinja
      @NetNinja  Рік тому +2

      If you hit the bell icon underneath the video, you'll get notifications for my uploads :)

    • @JimmyJazz5964
      @JimmyJazz5964 Рік тому

      @@NetNinja Good Guy!!

  • @joecater894
    @joecater894 9 місяців тому

    cant run json server in windows due to MS security

  • @wetpenguin
    @wetpenguin 11 місяців тому

    Anybody else get this error on ({ params }) ?
    Binding element 'params' implicitly has an 'any' type.ts(7031)
    EDIT: Oh, Mr. Net Ninja is using js instead of ts, just noticed. You have to do this in ts: ({ params }: { params: { id: number } })

  • @azizabdunabiyev
    @azizabdunabiyev 8 місяців тому

    👍👍

  • @ademineshat
    @ademineshat Рік тому

    Great course. But the idea of next.js with folders and pages is very confusing, page.jsx files everywhere, that's not ideal 😢

  • @JW-ps8vp
    @JW-ps8vp Рік тому

  • @towatch
    @towatch Рік тому

  • @TheDuppyman
    @TheDuppyman 10 місяців тому

    anyone have the ${variable} not output the data?

    • @TheDuppyman
      @TheDuppyman 10 місяців тому

      I had to use backticks and not single quotes

  • @sirvivaldk
    @sirvivaldk 3 місяці тому

    Shouldnt it be:
    export default async function TicketDetails({ params }:any) {...}

  • @camo4970
    @camo4970 10 місяців тому

    hello, i have an issue when trying to display the dynamic data in the page; when i type the data for example {ticket.user_email} it doesnt show it in the page. The rest of the page shows but not the data that i passed from the function is showing in the page and it doesnt show me any erros> what am i doing wrong?