Next.js 13 Crash Course Tutorial #5 - Styles, Fonts & Images

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/next-13-master...
➡️ Use promo code NEXTNINJA50 for 50% off!
📂🥷🏼 Access the course files on GitHub:
github.com/iamshaunjp/nextjs-...
📂🥷🏼 CSS File from course files:
github.com/iamshaunjp/nextjs-...
💻🥷🏼 React Tutorial:
netninja.dev/p/build-websites...
🔗🥷🏼 Next.js docs - nextjs.org/docs
🔗🥷🏼 CSS modules in Next.js - nextjs.org/docs/app/building-...
🔗🥷🏼 VS Code - code.visualstudio.com/

Пікірлер: 36

  • @user-kw4kp7eq9m
    @user-kw4kp7eq9m11 ай бұрын

    Good job! Thank you very much!

  • @programmingwithnit5308
    @programmingwithnit530811 ай бұрын

    Thank brother your explanation is very good

  • @thenldn
    @thenldn11 ай бұрын

    Are you using some configuration for the Tailwind classes to be sorted and formatted in a nice way?

  • @wx10
    @wx1011 ай бұрын

    Would you add subtitels on your website? Autogenerated would be fine.

  • @Av-fn5wx
    @Av-fn5wx10 ай бұрын

    One query, any reason why you haven't overriden your custom styles over tailwind default styles by uisnf "@layer" directive?

  • @alexg7282
    @alexg728211 ай бұрын

    Thx !

  • @patrickjreid
    @patrickjreid9 ай бұрын

    Actually, all this CSS stuff was very helpful

  • @alexg7282
    @alexg728211 ай бұрын

    Keep going !

  • @NetNinja

    @NetNinja

    11 ай бұрын

    Thanks Alex!

  • @raminjamal
    @raminjamal11 ай бұрын

    what font are you using in vs code ?

  • @mudassarmuhammad776
    @mudassarmuhammad77610 ай бұрын

    I can not find the code of page.jsx. Where is the link to that file, at 8:45

  • @dwisetyoaji5007
    @dwisetyoaji500711 ай бұрын

    everytime i use string in dynamic route like title of blog post the decode url like "blog/this%20is%20weird" anyone know how to change it like "blog/this-is-normal" ? thanks for the tutorial

  • @barbaros_dev

    @barbaros_dev

    11 ай бұрын

    I had a similar problem before. I was getting string from a webscraper i created that gets the titles of the map pins from google maps. For example the "i" letter it saves caused the problem. The ascii code for the letter "i" it saves is not the same as the regular "i". It looks the exact same in the browser but as a ascii character it was a different "i" so the url was trying to escape the letter since it recognizes it as a special character. I do not remember the exact solution but i had to save the scraped data as json utf-8 encoded json I believe so that was the thing solved the problem of the "i" character looking strange for the url I believe.

  • @vladimirdmitrienko8158
    @vladimirdmitrienko815810 ай бұрын

    Hello has anyone had problems with @apply font-bold text-primary text-lg; uncaught syntax error ?

  • @kirtan_kp

    @kirtan_kp

    10 ай бұрын

    yes it is showing error Syntax error: The `text-primary` class does not exist. If `text-primary` is a custom class, make sure it is defined within a `@layer` directive.

  • @muhmmedmedhat6646
    @muhmmedmedhat664611 ай бұрын

    Relly appreciate your time, Could you please explain how to use internationalization in nextjs in these Playlists, Can't wait for it ❤

  • @ryujinwatatsumi

    @ryujinwatatsumi

    11 ай бұрын

    there's a youtuber called hamed bahram he just made a new video about Internationalization in next13 if u need it

  • @muhmmedmedhat6646

    @muhmmedmedhat6646

    11 ай бұрын

    @abdellahidrissi4737 Thank my man

  • @ikennaezerebo709
    @ikennaezerebo7092 ай бұрын

    please make a video specially for styling😮‍💨

  • @haqqsachh369
    @haqqsachh36911 ай бұрын

    I have a watched your project management project in React & Firebase course on Udemy. You have used setCancellation state in there. Initially you have set it to false. But in the component you are using useffect to make it true also which makes it not useful. I dont know how it is working on your project but it doesnt work on my end because it straight away makes it TRUE.

  • @mudassarmuhammad776
    @mudassarmuhammad77610 ай бұрын

    page.jsx file is missing in the repo

  • @NetNinja

    @NetNinja

    10 ай бұрын

    You need to select the lesson-5 branch on the repo.

  • @haiderfuad8557
    @haiderfuad855711 ай бұрын

    Will you upload the whole course on youtube?

  • @NetNinja

    @NetNinja

    11 ай бұрын

    It's the whole first chapter, so about 2 hours in total. The master class on the pro site is about 7 hours in total.

  • @NeoCoding
    @NeoCoding11 ай бұрын

    old man good job as always sorry to grab tailwind to the project. it destroys base idea of separation the html and css

  • @ieatfood88

    @ieatfood88

    7 ай бұрын

    This isn't html, it's jsx. You're writing javascript and under the hood it's converted to html.

  • @NeoCoding

    @NeoCoding

    7 ай бұрын

    @@ieatfood88 ok then mixing structure in jsx with style in css. like inline styles that's no good

  • @moamenmohammed5656
    @moamenmohammed565611 ай бұрын

    What is the difference between Reactjs and nextjs

  • @NetNinja

    @NetNinja

    11 ай бұрын

    Next is a framework built on top of React, which supports additional features like file-based routing, SSR, pre-rendering etc. React itself is just a library which we'd normally use to make client-side apps. So Next.js just builds on top of that to give us a more feature-rich framework.

  • @moamenmohammed5656

    @moamenmohammed5656

    11 ай бұрын

    Is there is much deference between them ... I can use react but not next ... Is it ease to learn

  • @ryujinwatatsumi

    @ryujinwatatsumi

    11 ай бұрын

    @@moamenmohammed5656 learn react before next and build projects with react only and its packages ofc , then learn next and u will be able to see and appreciate next more , it will also be easy to learn next after react

  • @GabrielMartinez-ez9ue
    @GabrielMartinez-ez9ue11 ай бұрын

    Not to be a mood killer, but having those classes in a stylesheet beats the purpose of tailwind.

  • @NetNinja

    @NetNinja

    11 ай бұрын

    Fair point, but I think having a combination of my own component classes and just sprinkling in some extra tailwind utility classes into components keeps the component template cleaner for a tutorial, but still allows us to utilize tailwind.

  • @delusionguy5628
    @delusionguy56289 ай бұрын

    please launch the whole course for fee

  • @user-iy5vq2be6b
    @user-iy5vq2be6b11 ай бұрын

    Yadi Yadi Yada 🤣🤣