Easily one of the best introduction videos to Nextjs 13 I've seen. I love how you explain the different concepts, your explanations are so clear and to the point as well as nicely verbose. 👍
Just completed the whole course and believe me this is the best beginner tutorial for the latest NextJs. Everything is explained in very detail and this course really taught me so much in such a short amount of time. The only problem that I faced was with the last section(Client Side Rendering), I think I need to learn about CSR in a bit detail. Thank You Coding In Flow🙏🙏❤❤
I've just finished the project. This is literally THE BEST NEXTJS tutorial in the internet so far!!! 💯F (And possibly the only one on the UPDATED version of NEXT - 13.4) From my two years of self-learning programming , your channel is the easiest to understand and follow. I'm so grateful to find your channel! Thank you so much for your hard work, Sir. Please, keep it up! PS: I will definitely check your MERN course as well as your paid course! One loyal follower has just been earned 😊
Florian, thanks a lot! I have been reading documentation of next.js last couple of days, and now the way you put things together start making more sense. I first wanted to start watching that Learn Next.js 14 Server Actions video, but thought maybe I should give it a try to watch this video and did not regret for a sec!
Thanks a lot! found you when I was learning Unity through your 2D Platformer Playlist, Now all my Web Dev Searches on "Nexts How to - Coding in Flow" Thanks a lot for your easy and fun tutorials! Regards
Awesome stuff man, inspired me to purchase your Next/Express/TS course! Will go through that when it is updated for Next 13, this was SUCH a good tutorial
Thank you! I'm working on the update right now. We refactor the project from the pages to the app router so the course will teach both approaches (which I think is useful).
sincerely, thank you very much! I didn't know your channel, I'm halfway through the video and I'm already grateful and subscribed of course :-) I've been using Nextjs 13 for months and I didn't have the cache issue as clear as it is now, thanks again!
Well well done, jjust finnished your tutorial, and found it amazing, was really insightful and easy to follow along. Thank you for all the work you have put in. it was especially helpful to learn about nextJS and API calls as well as caching, truly thank you. this has change my perspective and mind for the better... lets see more content cause this was awsome!!!
@@codinginflow I am working on a bus app and needed to use the Geolocation API that is only accessible client side. And I think i made the mistake of trying to use a server component in my client component to make the fetch request, and various combinations of that. Finally I started looking for how to set up routes and this explanation was the most thorough for 13.4v, I really appreciate you explaining each line of code. Had no idea that you could pull the params from a URL the way you did with Search Params. Is there a reason you did it this way instead of sending the params through the fetch API's body?
@@codinginflow For me the value for image.description was showing empty. So when I looked into the image data, I show the description present on alt_description.
Thanks for the tutorial. At 41:15, I'm trying to display the error message (from the ErrorPageProps) by having {error} but tht doesn't seem to work... Is there a way to dispaly the error message on Error page (your "Bazinga" message) ? Thanks again for an awesome video
Thank you very much. Very useful video for me. I'm your subscriber now. I'm look a lot of other nextjs videos, but understood it only in your. Make more videos, you is the best. PS. sorry for my english
Hey! At 1:29:27 , you have the alert and image in different lines. They are appearing next to each other for me. How can I resolve this?? I tried using the tag. No change. Thanks!
I got it by wrapping it with another div. div className="d-flex flex-column align-items-center"> {/* Adding margin bottom for separation */}
This page fetches and caches data at build time. Even though the unsplash API always returns a new image, we see the same image after refreshing the page until we compile the project again.
{/* Adding margin bottom for separation */}
{/* No margin added here */} by {image.user.username}
@@codinginflow how to import ui library (chakra-ui) that needs "use client" without creating a wrapper for each component, almost degraded to pages router because of that
Loved your teaching style brother. One of the best, I should say. When will you finish your updated course with the latest Technologies? Like Next Js 13.4, Tailwind, Shadcn UI, Zustand, mongoDb
I will soon add an update where we convert the app of my Next.js course to the app router. We also use MongoDB. But I won't add any of these other technologies since they are not that important.
The course is good, but it utilizes hard refresh/navigation to display server-side updated data, which should not be necessary. If hard refresh is required to show the latest data from the server, then we could always use PHP.
@@codinginflow I got question, i'm looking for few hours now but no results, i can't get the not-found page working with the layout :/ It simply display the not found page even if it is custom. Do you have any idea why ? I have next 13.4.10. Thank you !
I would request you to make new tutorials on these same topics for nextjs 15 because a lot has changed and I am having constant issues, the things you are explaining are perfect but some things have actually been changed, like the static caching, which has just very recently been changed and just make sense to me anymore as even my static page is dynamic when using 'npm run dev' and the difference is evident when we use 'npm run build' and 'npm run start'. So I was confused at first that do I even need to use 'revalidate' but I did (if anyone is wondering). Now I feel I can still understand it because I have some good level of prior experience and very good at using chatgpt, but maybe a beginner will face more issues
For anyone who maybe seeing this after the release of nextjs 15 (firstly I recommend something I think I should have done but didn't which is that import nextjs version 13 instead of @latest). Problem 1: You will get an error when creating topics/[topic]/page.tsx, while using npm run build, because the 'params' should be imported as { params }: { params: Promise} and not as shown in the video. I am guessing this is something that changed in the newer versions where they are forcing you to use 'await' for getting params because it is being fetched from the route. And for getting topic from it you can simply destructure like this "const { topic } = await params;". I hope I don't have to post any other changes and actually I would say don't work with old versions of nextjs like I said above because you won't work with older versions in your actual projects and then won't understand these issues (but yes you can if you don't want challenges). Problem 2: export async function generateMetadata({ params }: { params: Promise }): Promise { const { topic }: PageProps["params"] = await params; return { title: `${topic} - NextJS 13.4 Image Gallery`, } } as you can see we have to return Metadata as a promise because we are using an async function and we are using an async function because of the issue described in problem 1. I guess I'll keep finding more of these conflicts and I'll keep writing the solution for them.
@@codinginflow I have encountered an error in deployment on vercel, on my system, I am able to build without any errors but getting a lot of errors on vercel First I was getting one because of bootstrap version, that I fixed by changing the install command on vercel but after that I am getting errors in [topic]/page.tsx and isr folder as well and I'm sure if I had removed those another error might pop up, the errors are coming from .next/server/app/folder_name/page.js I think it's because of ts to js mapping Could you help me with the deployment?
Your tutorial are great, I love them. I have a question will u make a 10 min video on on demand revalidation plzzz i can't find anywhere. Previous u make a short on on demand revalidation. Please make a detailed video on this plzzz
@@codinginflow I wanna know how on demand revalidation is different from background revalidation and how to implement in current version(in app router) of next js using validateByPath and validateByTag. And thanks for your response.
Спасибо разработчикам Yandex & YaGPT за предоставленную услугу по переводу видео-роликов на TH-cam и не только. Благодаря данной функции, я смог в более четком и понятном формате ознакомиться с этим потрясающим и очень подробным описанием Next 13. Успехов автору в сфере обучения!
I'm wondering if you can help with a problem I'm having? I've gotten through making the static page but when I refresh it always gets a new pic and there's an error in the terminal I will paste below. I tried downloading your code and it works. Then I replaced my package.json with yours, deleted node_module and package.lock and reinstalled. Didn't fix. So replaced essentially every file with what's in your version and it still didn't fix. So I'm at a loss right now. Here's the error I keep getting: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge' is not defined by "exports" in /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/react-dom/package.json at new NodeError (node:internal/errors:405:5) at exportsNotFound (node:internal/modules/esm/resolve:259:10) at packageExportsResolve (node:internal/modules/esm/resolve:589:9) at resolveExports (node:internal/modules/cjs/loader:571:36) at Module._findPath (node:internal/modules/cjs/loader:645:31) at Module._resolveFilename (node:internal/modules/cjs/loader:1058:27) at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/require-hook.js:180:36 at Module._load (node:internal/modules/cjs/loader:925:27) at Module.require (node:internal/modules/cjs/loader:1139:19) at require (node:internal/modules/helpers:121:18) at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/app-render/app-render.js:955:37 at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/lib/trace/tracer.js:155:62 at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/lib/trace/tracer.js:113:36 at NoopContextManager.with (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7057) at ContextAPI.with (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:516) at NoopTracer.startActiveSpan (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18086) at ProxyTracer.startActiveSpan (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18847) at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/lib/trace/tracer.js:102:107 at NoopContextManager.with (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7057) at ContextAPI.with (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:516) at NextTracerImpl.trace (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/lib/trace/tracer.js:102:32) at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/lib/trace/tracer.js:155:31 at wrappedRender (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/app-render/app-render.js:1006:62) { code: 'ERR_PACKAGE_PATH_NOT_EXPORTED' }
@codinginflow I did. One person suggested using an earlier version of Next, which I tried but it didn't work, and then it worked using your version, so that's wasn't it. Then someone else suggested putting "__NEXT_PRIVATE_PREBUNDLED_REACT=next" into the .env file, which I tried and then I got a different error message. It says something about a problem with useCallback and: Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app" I investigated those ideas but didn't find anything. BUT more recently I tried adding that line again since I've copy and pasted all your files individually into my project and now I no longer get the error message, but when I refresh the page I always get a new picture, which of course isn't what's supposed to happen. This might be unrelated, but I also noticed in the browser console I was getting an error saying the alt tag was missing from the image, even though I had alt set to image.description. I tried changing that to a random string and the error went away, so I think image.description is undefined for some reason. Any ideas are much appreciated!!
@@codinginflow Ok I figured out for whatever reason the problem only occurs when chrome devtools is open, and it occurs in your code as well. I downloaded both the version of your repo that was where I'm up to and your final code and both give the same errors when the devtools/console is open, but work fine when it's closed. Would you mind confirming that you get the same errors on your end when devtools is open? P.S. This is only on 'run dev', not after using 'run build' > 'start'. No errors come up using the build.
@@Royale3533 Just noting that I am also seeing this error and it does seem to be present only when the chrome dev tools drawer is open. I'm running node v18.16.0. Chrome is v119.0.6045.159 and the error is present even when opened in an in-cognito window (without further chrome extensions running). Edit - Just noticed that the error appears in the video too: th-cam.com/video/fqfer6xMp2A/w-d-xo.htmlsi=U3Ald75PZjdi3kld&t=7550
I am trying to create a PWA where next-pwa requires web pack. When I try the SSRProvider and Container on the layout.tsx, it gives me an error of: TypeError: Cannot read properties of undefined (reading 'call') within Webpack.js Is there a fix for this? I used the bootstrap.tsx file in components in the src directory
The fact that I can't see the spinner when trying to demo "generateStaticParams" makes the feel worried about the stability/reliability of App Router. Seems like Page Router is still more reliable at this moment.
great video, im loving the course youre a beast, one question tho, its ok to make the funcions as arrow functions on the export? im used to do arrow and works, but theres a down side to it?
Hlo sir can we use server components inside a client components I am using useref in sidbar inside sidebar i rendering a another user profile component using getserversession next-auth user info is it secure, sometimes I got error unhandle error server error.
Cache and next revalidate festures only works with the native fetch API and the export const revalidate is to be used if you prefer not to used the native fetch thats why they exist to answer your question as to why they are many types
@@codinginflow But they only works if you hard refresh the page. The Soft navigation just shows the already fetched image in dynamic page also, even after adding next { revalidate } or cache: "no-store" or revalidate = 0. This looks like a big bug here.
Subbed!! Realistically would Next JS be used to build a backend, I use Nest JS in the day job which provides much better structure for the backend, maybe a monorepo with Next on the front end Nest on the backend would be a nice stack.
@@codinginflowhi....thank you for fast reply(also i like your accent) but the group routing didn't work....i am trying to make the navbar display on root page.js but not display on root not-found.js and there need to be a root layout
Hey! I was using your video on firebaseUI from 5 years ago as a reference and while making my app it works completely as intended but there is just one little issue... Whenever there is a shift of focus from the app i.e when I open another app and then reopen my app the recyclerview gives index out off bound error as a result of some inconsistency. Can you please help me?
Thank you very much. Appreciate it. But when I deploying in vercel, i got a Error. "TypeError: Cannot read properties of undefined (reading 'raw')" I think the error occurs because it doesn't read the exported interface, or because the variables don't seem to have any data when I build them. So I forked from your github (final-project branch) , and try to deploy vercel, but got a same Error. What should I do?? plase help me!!
I found why this error occur. When deploy vercel, It does not recognize environment variables. So now, I'm finding the way how can i insert the environment variable to vercel. I don't think I can attach NEXT_PUBLIC because it's a variable used by serverside, what should I do?
Solve this problem! Dashboad => Project Setting (...mark) => Environment Variables => Add My Variables And Saved it. And Redploy, it works! Thank you!!!
hello florian one question...when i hard refresh a static page in development mode it shows new image is it normal..? by the way thanks for the video so grateful 🙏🙏
Thank you for this amazing course! Helped a lot. The google font family isnt applied to not-found.tsx page and only that page, but bootstrap styles and fonts are. Why?
@@TikTokTrendsCompilationyes I think thats a bug, basically not-found.tsx does not have layout.tsx as parent. you can give a classname to body in layout.tsx and inspect in browser but for it layout wraps loading.tsx
Hi, thanks for this. I've got a question: in the last part of the video as much as I'm able to understand, you're using the Next.js's built-in server as a proxy between the actual server and our app. I was thinking could the same thing be achieved with server actions instead of creating a new route? As I understand, server actions open a window to the server and therefore by defining a server action, we can use it directly in a client component, right?
Right, but server components also run on the server. Server actions are there to do mutations on the server in response to some user interaction. If we wanted to to search without client-side state, we would handle this via a URL param in a server component.
bro when i use in my layout file i was get this comment on terminal ==> In React 18, SSRProvider is not necessary and is a noop. You can remove it from your app. and when i use react bootstrap accordion i am getting this error ==> \src\app\components\BootstrapReactComp.jsx#Accordion#Item" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
@@codinginflow as I found it hard to remember all the "css command(?)" and I saw in your video you seem remembered them effortlessly, I wonder if there is a systematic way to learn css? Or is it all about practice in some real-life projects?
because he is a web developer now, besides, even for kotlin spring boot is like cutting down a tree by bashing it with a sharp rock, instead of using an axe
After watching German content (mainly movies on Prussia ) for a fortnight I was thinking I was hallucinating as I heard a German accent but when I checked his location It was Germany //I was relieved that I was not hallucinating btw the thumbnail was no clickbait it was all in one
Why you move from the android world to the js can you make a video about it you spent a lot of time in the android ecosystem so is it worth it . I want to make this transition not bc I hate android just i think about future and job security
I fell in the trap of studying full stack JS. They are great tools, but they are excellent only to get a good employee job (in a small/medium company) or creating your own product based startup. That's all. For guys like me who want only to freelance, basic fullstack php unfortunately has the most opportunities. Php is dead for employee positions, for freelance it remains king.
I wish this tutorial was more approachable and was written with JS instead of TS, because I saw the intro and it sounds really detailed and great. Thanks anyway..
@@codinginflow But I couldn't find a TS Tuorials among your playlists 😐 I'm seriously considering it, but every once and then there are arguments as well as prophecies - that TS isn't here to stay. I guess I should have adopted it already..
Dear sir, me from pakistn, please create video in this video only development work no css .full stack next.js 13.4 backend post one click add title, description, or image or pdf file add then other post only video title desc or description or vide add. last signup or sign in page. create... in simple way
@@codinginflow no need to be sorry. Some people even prefer to be able to pic an accent. Some even love when germans talking english..or should we call it germlish? But if you wanna improve, I would suggest to listen an repeat english music or to watch movies in english. Also stop trying to pronounce words that u've never heard...the school system is just f**ked up in this case. Forcing pupils to read words they've never heard before..cows shit is what that is to me
@@codinginflow good on ya :) Repeating things exactly the way I heard them worked pretty well for me, but we're all individuals. So sorry, I hadn't thought about that. What worked for me doesn't mean it will work for everyone. Please excuse me mate. And please don't get me wrong. I really appreciate your content! 🙏
Good news: My big Next.js course has just received an update to the new app router. Check it out: codinginflow.com/nextjs
Easily one of the best introduction videos to Nextjs 13 I've seen. I love how you explain the different concepts, your explanations are so clear and to the point as well as nicely verbose. 👍
Thank you man, glad you liked it!
Just completed the whole course and believe me this is the best beginner tutorial for the latest NextJs. Everything is explained in very detail and this course really taught me so much in such a short amount of time. The only problem that I faced was with the last section(Client Side Rendering), I think I need to learn about CSR in a bit detail. Thank You Coding In Flow🙏🙏❤❤
Thank you for the kind words 😊 We use more CSR in my MERN beginner course (which uses vanilla React)
Somehow you explained the process so my brain just understood everything with very little to no stress, absolutely perfect tutorial!
I've just finished the project. This is literally THE BEST NEXTJS tutorial in the internet so far!!! 💯F
(And possibly the only one on the UPDATED version of NEXT - 13.4)
From my two years of self-learning programming , your channel is the easiest to understand and follow.
I'm so grateful to find your channel! Thank you so much for your hard work, Sir.
Please, keep it up!
PS: I will definitely check your MERN course as well as your paid course! One loyal follower has just been earned 😊
Thank you! I was hoping to get this kind of reaction from people 😁
Everyone give this man a like & sub; truly one of the best teachers on YT.
Thanks brother 😍
Florian, thanks a lot! I have been reading documentation of next.js last couple of days, and now the way you put things together start making more sense. I first wanted to start watching that Learn Next.js 14 Server Actions video, but thought maybe I should give it a try to watch this video and did not regret for a sec!
Yea this one is a good starting point! Glad you liked it!
Great job man. Lots of credits from India 🎉😊
Thanks brother
Thanks a lot!
found you when I was learning Unity through your 2D Platformer Playlist, Now all my Web Dev Searches on "Nexts How to - Coding in Flow"
Thanks a lot for your easy and fun tutorials!
Regards
Thank you bro 👍🏻
Very well presented. Thanks for the free course and content. You have a great talent for explaining the intricacies of the topic.
Thank you very much 😊
"It's not beautiful, but it works, just like me", come on man, you have your own special beauties ... 💕
Awesome stuff man, inspired me to purchase your Next/Express/TS course! Will go through that when it is updated for Next 13, this was SUCH a good tutorial
Thank you! I'm working on the update right now. We refactor the project from the pages to the app router so the course will teach both approaches (which I think is useful).
sincerely, thank you very much! I didn't know your channel, I'm halfway through the video and I'm already grateful and subscribed of course :-)
I've been using Nextjs 13 for months and I didn't have the cache issue as clear as it is now, thanks again!
Thank you for the kind words 😎 Makes me happy to hear
I was looking for a video for my mentee, this is the absolute best on youtube.
Good work !
Thank you so much 😊
Thank you for your patience
Thank you for watching 😎
thank God I found this channel. thank you sir. you made live easy for people like me
Thank you very much! Happy to hear that!
I am always happy when I get a new video from this guy...I really like the way he teaches
So nice of you
I really love your tutorial bro, did you know among all the video tutorials here in TH-cam, only your tutorials I am able to complete the code.
Gotta cache ‘‘em all
I'm happy to hear that bro 💚
Well well done, jjust finnished your tutorial, and found it amazing, was really insightful and easy to follow along. Thank you for all the work you have put in. it was especially helpful to learn about nextJS and API calls as well as caching, truly thank you. this has change my perspective and mind for the better... lets see more content cause this was awsome!!!
I'm glad you like it 😊 I will make more Next.js tutorials
really well structured and good for beginners, this helped me to learn Next js
Thanks, Florian Walther keep adding new things related to Nextjs
Thank you for the kind words! I will
Thanks a lot for this, I was struggling for days trying to find a way to do what you did on the client side fetching
Happy to hear that! What were you struggling with?
@@codinginflow I am working on a bus app and needed to use the Geolocation API that is only accessible client side. And I think i made the mistake of trying to use a server component in my client component to make the fetch request, and various combinations of that. Finally I started looking for how to set up routes and this explanation was the most thorough for 13.4v, I really appreciate you explaining each line of code. Had no idea that you could pull the params from a URL the way you did with Search Params. Is there a reason you did it this way instead of sending the params through the fetch API's body?
@@El_Remolino19 Glad you liked it! I think reading the params in the route handler is simpler.
@@codinginflow agreed, thanks again. Keep up the great work
01:20:22 To show alt text for an image its better to use {image.alt_description}
Is that part of the Unsplash model?
@@codinginflow For me the value for image.description was showing empty. So when I looked into the image data, I show the description present on alt_description.
@@pankajwp Alright, thank you!
same for me! @@pankajwp
This was so awesome!!! Very enjoyable. Very informative. THANK YOU.
Thank you so much for the efforts. Just completed watching this and now this has cleared my concepts. Pls keep posting such content. 💯
I will 💚 thank you
Thanks for the tutorial.
At 41:15, I'm trying to display the error message (from the ErrorPageProps) by having {error} but tht doesn't seem to work...
Is there a way to dispaly the error message on Error page (your "Bazinga" message) ?
Thanks again for an awesome video
Thank you very much. Very useful video for me. I'm your subscriber now. I'm look a lot of other nextjs videos, but understood it only in your. Make more videos, you is the best. PS. sorry for my english
Thank you for the kind words 💚
that was excellent ! , your teaching is amazing i will be sure to look at your paid courses.
Thank you brother. Glad you liked it.
Hey! At 1:29:27 , you have the alert and image in different lines. They are appearing next to each other for me. How can I resolve this?? I tried using the tag. No change. Thanks!
I got it by wrapping it with another div.
div className="d-flex flex-column align-items-center">
{/* Adding margin bottom for separation */}
This page fetches and caches data at build time.
Even though the unsplash API always returns a new image, we see the
same image after refreshing the page until we compile the project again.
{/* Adding margin bottom for separation */}
{/* No margin added here */}
by {image.user.username}
thanks!!! solved me an issue that i was struggling with.
What was your issue?
@@codinginflow how to import ui library (chakra-ui) that needs "use client" without creating a wrapper for each component, almost degraded to pages router because of that
@@usemonocle-il Glad it helped 😊
At 1:24:58 I cannot get it to work it says TypeError: fetch failed, I followed it exactly how you did it. Thanks man
figured it out, my permissions in the API, but also now I just realised my workplace proxy is not allowing me to use the API?
Man, no words. Thank you!❤
My pleasure!
Hi Florian, what VS Code plugin did you use to get that closing tag a different color ( 01:59:47 )?
Highlight Matchin Tag I think
@@codinginflowThanks for the prompt reply, but it's not it. I didn't get the effect
Loved your teaching style brother. One of the best, I should say. When will you finish your updated course with the latest Technologies? Like Next Js 13.4, Tailwind, Shadcn UI, Zustand, mongoDb
I will soon add an update where we convert the app of my Next.js course to the app router. We also use MongoDB. But I won't add any of these other technologies since they are not that important.
@@codinginflow Maybe Ecommerce Website with these technologies instead.
The course is good, but it utilizes hard refresh/navigation to display server-side updated data, which should not be necessary. If hard refresh is required to show the latest data from the server, then we could always use PHP.
This is not my fault, this is a bug in Next 13
@@codinginflow Is it possible for me to mix it with client-side fetching to get the latest data without the hard refresh?
@@divadolleh Yes you can do that. Or use the pages directory for now. The app directory is still a bit buggy.
Thank you - definitely worth watching
Thank you, happy to hear that 😎
I have a feeling your "/hell" route returning "NOT FOUND Sorry, this page does not exist" was very symbolic 😂
Sounds like I misspelled hello 😅
I found it to be incredibly informative.
Glad to hear that bro
Hey, your tutorial is amazing, Will u make a tutorial on how to use on-demand revalidation in the next js please I am stuck in this..
My next tutorial will contain revalidation inside server actions. Maybe that helps you!
Just finished. thanks!
Thanks for watching!
great content bro keep it up 👍👍👍👍
Thanks brother
Love you for the awesome tutorial, hate you for the hamburger part 😅
😅
@@codinginflow I got question, i'm looking for few hours now but no results, i can't get the not-found page working with the layout :/ It simply display the not found page even if it is custom. Do you have any idea why ? I have next 13.4.10. Thank you !
Great stuff 👏👏👏
1:50:27 Florian . doesn't refer to the parent folder, .. is the parent folder, . is the current one
thank you
I would request you to make new tutorials on these same topics for nextjs 15 because a lot has changed and I am having constant issues, the things you are explaining are perfect but some things have actually been changed, like the static caching, which has just very recently been changed and just make sense to me anymore as even my static page is dynamic when using 'npm run dev' and the difference is evident when we use 'npm run build' and 'npm run start'. So I was confused at first that do I even need to use 'revalidate' but I did (if anyone is wondering).
Now I feel I can still understand it because I have some good level of prior experience and very good at using chatgpt, but maybe a beginner will face more issues
Yea I'll make a new Next.js beginner tutorial soon 👍🏻
@codinginflow yes, it's an awesome tutorial otherwise (awesome enough that I'm completing it even with these issues)
For anyone who maybe seeing this after the release of nextjs 15 (firstly I recommend something I think I should have done but didn't which is that import nextjs version 13 instead of @latest).
Problem 1: You will get an error when creating topics/[topic]/page.tsx, while using npm run build, because the 'params' should be imported as { params }: { params: Promise} and not as shown in the video.
I am guessing this is something that changed in the newer versions where they are forcing you to use 'await' for getting params because it is being fetched from the route.
And for getting topic from it you can simply destructure like this "const { topic } = await params;".
I hope I don't have to post any other changes and actually I would say don't work with old versions of nextjs like I said above because you won't work with older versions in your actual projects and then won't understand these issues (but yes you can if you don't want challenges).
Problem 2: export async function generateMetadata({ params }: { params: Promise }): Promise {
const { topic }: PageProps["params"] = await params;
return {
title: `${topic} - NextJS 13.4 Image Gallery`,
}
}
as you can see we have to return Metadata as a promise because we are using an async function and we are using an async function because of the issue described in problem 1.
I guess I'll keep finding more of these conflicts and I'll keep writing the solution for them.
Correct, this is pretty much the biggest change. It's pretty simple but confusing. I guess I have to make a new tutorial soon.
@@codinginflow I have encountered an error in deployment on vercel, on my system, I am able to build without any errors but getting a lot of errors on vercel
First I was getting one because of bootstrap version, that I fixed by changing the install command on vercel but after that I am getting errors in [topic]/page.tsx and isr folder as well and I'm sure if I had removed those another error might pop up, the errors are coming from .next/server/app/folder_name/page.js
I think it's because of ts to js mapping
Could you help me with the deployment?
Your just Amazing bro thank you for you effort and Time to make high quality videos and tutorials thnx men 🤜🤛
Thank you for watching ❤️
thank you my friend
You're welcome!
Thank you buddy 😁
You are doing a very good job.
Thank you my friend
Your tutorial are great, I love them. I have a question will u make a 10 min video on on demand revalidation plzzz i can't find anywhere. Previous u make a short on on demand revalidation. Please make a detailed video on this plzzz
What du you wanna know exactly?
@@codinginflow I wanna know how on demand revalidation is different from background revalidation and how to implement in current version(in app router) of next js using validateByPath and validateByTag. And thanks for your response.
Thanks. Definitely worth watching!
Thank you 💚 Please let me know how you like the tutorial.
you are the best 💯💯💯
thank you bro
Спасибо разработчикам Yandex & YaGPT за предоставленную услугу по переводу видео-роликов на TH-cam и не только. Благодаря данной функции, я смог в более четком и понятном формате ознакомиться с этим потрясающим и очень подробным описанием Next 13. Успехов автору в сфере обучения!
I'm wondering if you can help with a problem I'm having? I've gotten through making the static page but when I refresh it always gets a new pic and there's an error in the terminal I will paste below. I tried downloading your code and it works. Then I replaced my package.json with yours, deleted node_module and package.lock and reinstalled. Didn't fix. So replaced essentially every file with what's in your version and it still didn't fix. So I'm at a loss right now. Here's the error I keep getting:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge' is not defined by "exports" in /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/react-dom/package.json
at new NodeError (node:internal/errors:405:5)
at exportsNotFound (node:internal/modules/esm/resolve:259:10)
at packageExportsResolve (node:internal/modules/esm/resolve:589:9)
at resolveExports (node:internal/modules/cjs/loader:571:36)
at Module._findPath (node:internal/modules/cjs/loader:645:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1058:27)
at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/require-hook.js:180:36
at Module._load (node:internal/modules/cjs/loader:925:27)
at Module.require (node:internal/modules/cjs/loader:1139:19)
at require (node:internal/modules/helpers:121:18)
at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/app-render/app-render.js:955:37
at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/lib/trace/tracer.js:155:62
at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/lib/trace/tracer.js:113:36
at NoopContextManager.with (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7057)
at ContextAPI.with (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:516)
at NoopTracer.startActiveSpan (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18086)
at ProxyTracer.startActiveSpan (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18847)
at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/lib/trace/tracer.js:102:107
at NoopContextManager.with (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7057)
at ContextAPI.with (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:516)
at NextTracerImpl.trace (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/lib/trace/tracer.js:102:32)
at /Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/lib/trace/tracer.js:155:31
at wrappedRender (/Users/eleerogers/Documents/code/image-gallery-nextjs/node_modules/next/dist/server/app-render/app-render.js:1006:62) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
Did you google the error message?
@codinginflow I did. One person suggested using an earlier version of Next, which I tried but it didn't work, and then it worked using your version, so that's wasn't it. Then someone else suggested putting "__NEXT_PRIVATE_PREBUNDLED_REACT=next" into the .env file, which I tried and then I got a different error message. It says something about a problem with useCallback and:
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app"
I investigated those ideas but didn't find anything.
BUT more recently I tried adding that line again since I've copy and pasted all your files individually into my project and now I no longer get the error message, but when I refresh the page I always get a new picture, which of course isn't what's supposed to happen.
This might be unrelated, but I also noticed in the browser console I was getting an error saying the alt tag was missing from the image, even though I had alt set to image.description. I tried changing that to a random string and the error went away, so I think image.description is undefined for some reason.
Any ideas are much appreciated!!
@@codinginflow Ok I figured out for whatever reason the problem only occurs when chrome devtools is open, and it occurs in your code as well. I downloaded both the version of your repo that was where I'm up to and your final code and both give the same errors when the devtools/console is open, but work fine when it's closed. Would you mind confirming that you get the same errors on your end when devtools is open?
P.S. This is only on 'run dev', not after using 'run build' > 'start'. No errors come up using the build.
@@Royale3533 Just noting that I am also seeing this error and it does seem to be present only when the chrome dev tools drawer is open. I'm running node v18.16.0. Chrome is v119.0.6045.159 and the error is present even when opened in an in-cognito window (without further chrome extensions running).
Edit - Just noticed that the error appears in the video too: th-cam.com/video/fqfer6xMp2A/w-d-xo.htmlsi=U3Ald75PZjdi3kld&t=7550
I am trying to create a PWA where next-pwa requires web pack. When I try the SSRProvider and Container on the layout.tsx, it gives me an error of:
TypeError: Cannot read properties of undefined (reading 'call') within Webpack.js
Is there a fix for this?
I used the bootstrap.tsx file in components in the src directory
The fact that I can't see the spinner when trying to demo "generateStaticParams" makes the feel worried about the stability/reliability of App Router. Seems like Page Router is still more reliable at this moment.
great video, im loving the course youre a beast, one question tho, its ok to make the funcions as arrow functions on the export? im used to do arrow and works, but theres a down side to it?
That's completely fine. I just prefer the function keyword.
@@codinginflow thank you, keep up with the good work
Truly amazing job!
Saludos amigo!!
Thank you so much!
Hlo sir can we use server components inside a client components I am using useref in sidbar inside sidebar i rendering a another user profile component using getserversession next-auth user info is it secure, sometimes I got error unhandle error server error.
Awesome course
Thank you very much!
Thankyou buddy , You are amazing!
Thanks brother
Very cool stuff. thank you very much. I think the route.tsx should be route.ts.
Correct, thank you!
thank you for your effort !
Thank you for watching!
what is the justification for using next/navigation for the appRouter hook and not next/router?
next/router can only be used in the pages dir. In /app we have to use next/navigation.
@@codinginflow thanks!
Cache and next revalidate festures only works with the native fetch API and the export const revalidate is to be used if you prefer not to used the native fetch thats why they exist to answer your question as to why they are many types
Right but there is still no-store, no-cache, and next { revalidate } all inside the fetch config
@@codinginflow But they only works if you hard refresh the page. The Soft navigation just shows the already fetched image in dynamic page also, even after adding next { revalidate } or cache: "no-store" or revalidate = 0. This looks like a big bug here.
Thank you for the great content... :D
Thanks for watching brother
Subbed!!
Realistically would Next JS be used to build a backend, I use Nest JS in the day job which provides much better structure for the backend, maybe a monorepo with Next on the front end Nest on the backend would be a nice stack.
You can totally do that. I have a project that uses Next.js with Express as the backend.
What if i want to have the navbar on my home(/) page? But not on the not-found page
use route groups, I have a Short on that
@@codinginflowhi....thank you for fast reply(also i like your accent) but the group routing didn't work....i am trying to make the navbar display on root page.js but not display on root not-found.js and there need to be a root layout
@@elvisdavinci2567 Put the root page into a route group together with a new layout.tsx that contains the navbar
Hey! I was using your video on firebaseUI from 5 years ago as a reference and while making my app it works completely as intended but there is just one little issue... Whenever there is a shift of focus from the app i.e when I open another app and then reopen my app the recyclerview gives index out off bound error as a result of some inconsistency. Can you please help me?
I'm using React-bootstrap elements in 2024 and it works fine without 'use client' and why? Did the update come out and now they are client components?
Good question, I don't know
Thank you very much. Appreciate it.
But when I deploying in vercel, i got a Error.
"TypeError: Cannot read properties of undefined (reading 'raw')"
I think the error occurs because it doesn't read the exported interface, or because the variables don't seem to have any data when I build them.
So I forked from your github (final-project branch) , and try to deploy vercel, but got a same Error.
What should I do?? plase help me!!
I found why this error occur.
When deploy vercel, It does not recognize environment variables.
So now, I'm finding the way how can i insert the environment variable to vercel.
I don't think I can attach NEXT_PUBLIC because it's a variable used by serverside, what should I do?
Solve this problem!
Dashboad => Project Setting (...mark) => Environment Variables => Add My Variables And Saved it.
And Redploy, it works!
Thank you!!!
hello florian one question...when i hard refresh a static page in development mode it shows new image is it normal..? by the way thanks for the video so grateful 🙏🙏
Yes, in development you always get a refresh
Thank you for this amazing course! Helped a lot.
The google font family isnt applied to not-found.tsx page and only that page, but bootstrap styles and fonts are. Why?
Are you using the latest version of nextjs or the one from the video?
@@codinginflow im using 13.4.10
@@TikTokTrendsCompilationyes I think thats a bug, basically not-found.tsx does not have layout.tsx as parent. you can give a classname to body in layout.tsx and inspect in browser but for it layout wraps loading.tsx
Can I learn this without any experience with TypeScript yet? Just the basics on types and interface for now?
Yea you should be fine
Hi, thanks for this. I've got a question: in the last part of the video as much as I'm able to understand, you're using the Next.js's built-in server as a proxy between the actual server and our app. I was thinking could the same thing be achieved with server actions instead of creating a new route? As I understand, server actions open a window to the server and therefore by defining a server action, we can use it directly in a client component, right?
Right, but server components also run on the server. Server actions are there to do mutations on the server in response to some user interaction. If we wanted to to search without client-side state, we would handle this via a URL param in a server component.
Actually I think you're right, we could also use a server action to just fetch some data
So appreciate it ❤
Thank you ❤️
Thanks florian
Can anyone please clarify my one doubt.. so getStaticProps getServerSideProps not required?
Not anymore. They are replaced for server components if you use the app dir.
well done!
Thank you!
@@codinginflow just a suggestion, I think there aren't many authentication tutorials on nextjs 13, you may consider doing one
@@gmoniava Check out my Next.js e-commerce tutorial, there we implement Next-Auth 👍
If i want data to fetch each time i visit the route i need to use a client side component with useEffect?
Because using no-cache only fetch data each time you reload the page
That seems to be a bug currently and there are discussions about this on Github. We have to wait and see if they add hard reload to navigation.
See: github.com/vercel/next.js/issues/42991
bro when i use in my layout file i was get this comment on terminal
==> In React 18, SSRProvider is not necessary and is a noop. You can remove it from your app. and when i use react bootstrap accordion i am getting this error ==> \src\app\components\BootstrapReactComp.jsx#Accordion#Item" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
It's not a bug. You can remove the SSRProvider
Using bootstrap makes this a little messy. But I like this video in general.
Glad you liked it!
Thanks a lot sir
Let me know how you like it!
Hi, can you make a next js 13.4 typescript i18next video?
Can you make a course to teach us about css/bootstrap?
What do you wanna see exactly?
@@codinginflow as I found it hard to remember all the "css command(?)" and I saw in your video you seem remembered them effortlessly, I wonder if there is a systematic way to learn css? Or is it all about practice in some real-life projects?
@@divadolleh Just practice I would say. I don't do anything else than just building stuff.
Thanks, Why JS and not Spring (Kotlin)?
because he is a web developer now, besides, even for kotlin spring boot is like cutting down a tree by bashing it with a sharp rock, instead of using an axe
lmao
man hört absolut deinen deutschen akzent aber sehr nices video bist nen cooler typ
danke bro
Text size needs to be enlarged. It is small even at full-screen.
Are you watching this on a Gameboy?
Cool. Can I get the Complete Source code
The GitHub link is in the description
How to get emoji in VS code
What do you mean?
Can someone assure me that I can follow this tutorial for next.js for till this time also ?....because this is next.js 13
Yes. There are no new APIs in Next 14.
After watching German content (mainly movies on Prussia ) for a fortnight I was thinking I was hallucinating as I heard a German accent but when I checked his location It was Germany //I was relieved that I was not hallucinating
btw the thumbnail was no clickbait it was all in one
Haha that's quite funny 😁
Why you move from the android world to the js can you make a video about it you spent a lot of time in the android ecosystem so is it worth it . I want to make this transition not bc I hate android just i think about future and job security
I'm considering making a video about it but I try to keep my channel focused on tutorials now
I fell in the trap of studying full stack JS. They are great tools, but they are excellent only to get a good employee job (in a small/medium company) or creating your own product based startup. That's all. For guys like me who want only to freelance, basic fullstack php unfortunately has the most opportunities. Php is dead for employee positions, for freelance it remains king.
Interesting, thank you for sharing your experience. I thought Next.js is popular too for freelance dev.
Cool
Thank you
Du könntest auch gut auf deutsch präsentieren!! :D
Jo aber dann würden es sich nur 50 Leute angucken
Can you do cs50X2023 course
That sounds kinda boring tbh
Thank for the reply but it would be helpful for non cs background
@@SkullRFSYT I think there are already good sources for this
I wish this tutorial was more approachable and was written with JS instead of TS, because I saw the intro and it sounds really detailed and great.
Thanks anyway..
Just bite the bullet and learn TypeScript. JS is not suited for any serious project.
@@codinginflow
But I couldn't find a TS Tuorials among your playlists 😐
I'm seriously considering it, but every once and then there are arguments as well as prophecies - that TS isn't here to stay.
I guess I should have adopted it already..
Dear sir, me from pakistn, please create video in this video only development work no css .full stack next.js 13.4 backend post one click add title, description, or image or pdf file add then other post only video title desc or description or vide add. last signup or sign in page. create... in simple way
I don't understand what you mean. Can you explain it?
🙏👍
Enjoy 😊
@@codinginflow Please add it to the playlist; thank you!
@@JMRVRGS Thanks for the reminder, I'll do it in a bit
Thanks a lot!! the content is very helpfull :)
Only your pronunciation makes it real hard to follow.
Sorry!
@@codinginflow no need to be sorry. Some people even prefer to be able to pic an accent. Some even love when germans talking english..or should we call it germlish?
But if you wanna improve, I would suggest to listen an repeat english music or to watch movies in english. Also stop trying to pronounce words that u've never heard...the school system is just f**ked up in this case. Forcing pupils to read words they've never heard before..cows shit is what that is to me
@@jamesleihe5689 I already consume everything in English 😅
@@codinginflow good on ya :)
Repeating things exactly the way I heard them worked pretty well for me, but we're all individuals.
So sorry, I hadn't thought about that. What worked for me doesn't mean it will work for everyone.
Please excuse me mate.
And please don't get me wrong. I really appreciate your content! 🙏