Stop Doing These Next.js Mistakes

Sdílet
Vložit
  • čas přidán 15. 06. 2024
  • I have used Next.js for building many production and side projects at this point, and along the way, I committed so many dumb mistakes that either made my websites slower or my code looks really complex. This video should guide you through these mistakes and the right way to avoid them on your Next.js projects.
    🎉Our Newsletter is live! Join thousands of other developers
    islemmaboud.com/join-newsletter
    ⭐ Timestamps ⭐
    00:00 Intro
    00:14 (01) Not using Next Image
    04:00 (02) Mixing Client & Server components
    07:00 (03) Leaving Routes without validation
    11:41 (04) Not utilizing Route Groups
    -- Special Links
    ✨ Join Figma for Free and start designing now!
    psxid.figma.com/69wr7zzb1mxm
    👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
    psxid.figma.com/ucwkx28d18fo-...
    -- Special Links
    ✨ Join Figma for Free and start designing now!
    psxid.figma.com/69wr7zzb1mxm
    👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
    psxid.figma.com/ucwkx28d18fo-...
    -- Watch More Videos
    🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
    • Build Login/Register A...
    🧭 Turn Design into React Code | From prototype to Full website in no time
    • Turn Design into React...
    🧭 Watch Tutorial on Designing the website on Figma
    • I Design a onecolor We...
    🧭 Watch Create a Modern React Login/Register Form with smooth Animations
    • Create a Modern React ...
    🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
    • Debug React Apps Like ...
    🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
    • Master React Like Pro ...
    🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
    • Debug React Apps Like ...
    🧭 Introduction to GraphQL with Apollo and React
    • Introduction to GraphQ...
    🐦 Follow me on Twitter: / ipenywis
    💻 Github Profile: github.com/ipenywis
    Made with 💗 by Coderone

Komentáře • 31

  • @olicoding
    @olicoding Před 5 měsíci +3

    great tip on the parenthesis for the directory structure, will check it out. Also the layout for each, sounds interesting. Thanks for sharing!

  • @1mt4y
    @1mt4y Před 5 měsíci

    In error #03, "Leaving Routes without validation," I'm curious whether this could potentially pose a security risk. Revealing less about our API functionality might enhance security by limiting information available to potential hackers. Thoughts on considering this aspect for a more robust security stance?

  • @0xAndy
    @0xAndy Před 5 měsíci

    For the separation of client/server components section, could you put the uncontrolled form in a server component and handle the onSubmit in a client component?

    • @CoderOne
      @CoderOne  Před 5 měsíci

      You can't do it that way, cause the onSubmit event handler has to be attached to the element, so it must be a client component. Otherwise, server actions can be used in here but the main part of why we are using a client component is not about onSubmit, it is more about the state handling and displaying that uploaded image.

  • @michakrecisz5100
    @michakrecisz5100 Před 5 měsíci +1

    works good if use vercel or any other service that use Edge. Cost are pretty high. In place where I work, we are runnig 35-70 EC2 machines to host our service, cost for using and all transformations are huge. Nextjs is pretty slow, and in the use a lot resources to handle Images, also if you have multiple intances you will have problems with caching this image (cache is a state in the end). To be honest as more I use nextjs more i thing that nextjs is not a good solution for enterprise software.

  • @StemLG
    @StemLG Před 5 měsíci +1

    quick tip, you don't have to specify height and width with an imported image in the component

    • @captainnoyaux
      @captainnoyaux Před 4 měsíci

      Why ? It's automatically set ? What is the behaviour on loading, does it load prefilling the image dimensions or does it change after loading (which is bad practice )?

  • @AmirMirkamali
    @AmirMirkamali Před 3 měsíci

    Can you please tell me which extension do you use for folding tags props?

    • @marnhtetzan7503
      @marnhtetzan7503 Před měsícem +1

      it's tailwind fold plugin for vscode. It can hide messy tailwindcss utility classes

  • @nikako1889
    @nikako1889 Před 5 měsíci

    can't we use actions for form and make it server component as well?

    • @CoderOne
      @CoderOne  Před 5 měsíci

      But when you need to manage state or events inside the component, it can only be a client component.

  • @hubertmbitor7017
    @hubertmbitor7017 Před 5 měsíci +1

    Do server components wrapped in a client component become client components?

    • @sumitsahu8657
      @sumitsahu8657 Před 5 měsíci

      No!

    • @night23412
      @night23412 Před 5 měsíci +2

      nope, but you cannot directly define a server component inside the return statement of a client component. Instead you have to pass it in as children (eg: and render it as {children} inside the client component

  • @jayf.k2497
    @jayf.k2497 Před 5 měsíci

    What’s the name of the extension that displays the size of the line of code… I mean the (gzipped stuff)can anybody help?

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 27 dny

    Thank You

  • @anggiebratadinata7263
    @anggiebratadinata7263 Před měsícem

    Using is not always the best because it will tax your server's CPU. It may not be an issue if your app/site has only a handful of images but if you have hundreds or thousands of images, you can expect higher bills. Especially, if you don't use Vercel to host it. :)

  • @YouTubePL666
    @YouTubePL666 Před 5 měsíci

    In most use cases you do not want to give the client information what is wrong with the request - unless it's an authorised request from an authenticated user - but in public api, you always obscure if something is not crucial to the client - this way it makes the attacker do more work to find out what is wrong with their malformed request. It may of course be depended on the type of service somebody is creating - like for "anonymous" pastebin this may not be the case and you may not care about the info returned - then just make the client experience better by providing that information back.
    I think the title of that chapter is kinda misleading, because You always want to have routes with validation... they just may keep quiet about it ;)

  • @Frontend-Ninja
    @Frontend-Ninja Před 5 měsíci +1

    I would like to request a timestamps, so i can focus on what really interests me ;)

    • @CoderOne
      @CoderOne  Před 5 měsíci +1

      They are right in the description. I'm wondering why CZcams is not showing the timestamps on the video track

  • @alexdin1565
    @alexdin1565 Před 5 měsíci

    first time i see your channel first like and first subscribe
    please can you make a video on how we can paginate in Next.js

  • @cynicusme9007
    @cynicusme9007 Před 4 měsíci

    I hate to be the which Vscode theme are you using guy!! It sucks! but .... which vscode theme are you using?

  • @Chaima-lx1nb
    @Chaima-lx1nb Před 2 měsíci

    ❤❤❤❤❤❤❤❤❤❤❤

  • @ariell121
    @ariell121 Před 5 měsíci

    Stop using Next.js

  • @im7254
    @im7254 Před 5 měsíci

    if you doing anything server side, you are a bad dev

    • @user-fr2fm3ri3w
      @user-fr2fm3ri3w Před 5 měsíci

      Spoken like a true reactionary dev 🥶

    • @im7254
      @im7254 Před 5 měsíci

      @@user-fr2fm3ri3w innerHTML dev. I don't need a library to draw html. and my html doesn't reload every time I update a variable for no reason. there is zero reason to have a server for almost every use case