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
Good job! Thank you very much!
Thank brother your explanation is very good
Are you using some configuration for the Tailwind classes to be sorted and formatted in a nice way?
Would you add subtitels on your website? Autogenerated would be fine.
One query, any reason why you haven't overriden your custom styles over tailwind default styles by uisnf "@layer" directive?
Thx !
Actually, all this CSS stuff was very helpful
Keep going !
@NetNinja
11 ай бұрын
Thanks Alex!
what font are you using in vs code ?
I can not find the code of page.jsx. Where is the link to that file, at 8:45
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
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.
Hello has anyone had problems with @apply font-bold text-primary text-lg; uncaught syntax error ?
@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.
Relly appreciate your time, Could you please explain how to use internationalization in nextjs in these Playlists, Can't wait for it ❤
@ryujinwatatsumi
11 ай бұрын
there's a youtuber called hamed bahram he just made a new video about Internationalization in next13 if u need it
@muhmmedmedhat6646
11 ай бұрын
@abdellahidrissi4737 Thank my man
please make a video specially for styling😮💨
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.
page.jsx file is missing in the repo
@NetNinja
10 ай бұрын
You need to select the lesson-5 branch on the repo.
Will you upload the whole course on youtube?
@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.
old man good job as always sorry to grab tailwind to the project. it destroys base idea of separation the html and css
@ieatfood88
7 ай бұрын
This isn't html, it's jsx. You're writing javascript and under the hood it's converted to html.
@NeoCoding
7 ай бұрын
@@ieatfood88 ok then mixing structure in jsx with style in css. like inline styles that's no good
What is the difference between Reactjs and nextjs
@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
11 ай бұрын
Is there is much deference between them ... I can use react but not next ... Is it ease to learn
@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
Not to be a mood killer, but having those classes in a stylesheet beats the purpose of tailwind.
@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.
please launch the whole course for fee
Yadi Yadi Yada 🤣🤣