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🙏🙏❤❤
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. 👍
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 😊
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).
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!
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?
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
@@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
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 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.
@@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 !
Спасибо разработчикам Yandex & YaGPT за предоставленную услугу по переводу видео-роликов на UA-cam и не только. Благодаря данной функции, я смог в более четком и понятном формате ознакомиться с этим потрясающим и очень подробным описанием Next 13. Успехов автору в сфере обучения!
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.
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.
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.
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: ua-cam.com/video/fqfer6xMp2A/v-deo.htmlsi=U3Ald75PZjdi3kld&t=7550
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.
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.
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 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
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?
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
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 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
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 🙏🙏
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.
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!!!
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?
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.
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
@@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?
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..
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
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
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! 🙏
EDIT: nevermind, i realized that the hamburger only activates at a certain screen width haha Question: in NavBar.tsx, but the Hamburger menu isn't there and the Hello link is just adjacent to the NextJS Image Gallery link. any likely reasons why it isn't showing up even with the same NavBar.tsx?
Good news: My big Next.js course has just received an update to the new app router. Check it out: codinginflow.com/nextjs
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!
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!
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 😍
Great job man. Lots of credits from India 🎉😊
Thanks brother
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).
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 😊
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!
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
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
Thank you for your patience
Thank you for watching 😎
I was looking for a video for my mentee, this is the absolute best on youtube.
Good work !
Thank you so much 😊
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 UA-cam, only your tutorials I am able to complete the code.
Gotta cache ‘‘em all
I'm happy to hear that bro 💚
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!
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
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 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
Man, no words. Thank you!❤
My pleasure!
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 💚
Your just Amazing bro thank you for you effort and Time to make high quality videos and tutorials thnx men 🤜🤛
Thank you for watching ❤️
I found it to be incredibly informative.
Glad to hear that bro
Thank you - definitely worth watching
Thank you, happy to hear that 😎
that was excellent ! , your teaching is amazing i will be sure to look at your paid courses.
Thank you brother. Glad you liked it.
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 😊
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.
Great stuff 👏👏👏
Thanks. Definitely worth watching!
Thank you 💚 Please let me know how you like the tutorial.
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
I have a feeling your "/hell" route returning "NOT FOUND Sorry, this page does not exist" was very symbolic 😂
Sounds like I misspelled hello 😅
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!
Thank you buddy 😁
You are doing a very good job.
Thank you my friend
thank you for your effort !
Thank you for watching!
Just finished. thanks!
Thanks for watching!
Thankyou buddy , You are amazing!
Thanks brother
Thanks florian
you are the best 💯💯💯
thank you bro
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 !
Спасибо разработчикам Yandex & YaGPT за предоставленную услугу по переводу видео-роликов на UA-cam и не только. Благодаря данной функции, я смог в более четком и понятном формате ознакомиться с этим потрясающим и очень подробным описанием Next 13. Успехов автору в сфере обучения!
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.
Truly amazing job!
Saludos amigo!!
Thank you so much!
Thank you for the great content... :D
Thanks for watching brother
Awesome course
Thank you very much!
Very cool stuff. thank you very much. I think the route.tsx should be route.ts.
Correct, thank you!
great content bro keep it up 👍👍👍👍
Thanks brother
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.
thank you my friend
You're welcome!
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.
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?
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: ua-cam.com/video/fqfer6xMp2A/v-deo.htmlsi=U3Ald75PZjdi3kld&t=7550
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 👍
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.
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.
So appreciate it ❤
Thank you ❤️
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.
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
Thanks a lot sir
Let me know how you like it!
Using bootstrap makes this a little messy. But I like this video in general.
Glad you liked it!
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
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?
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 😁
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}
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
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
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!
Can I learn this without any experience with TypeScript yet? Just the basics on types and interface for now?
Yea you should be fine
1:50:27 Florian . doesn't refer to the parent folder, .. is the parent folder, . is the current one
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
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.
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!!!
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
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
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.
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
Cool
Thank you
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
man hört absolut deinen deutschen akzent aber sehr nices video bist nen cooler typ
danke bro
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.
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
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.
Text size needs to be enlarged. It is small even at full-screen.
Are you watching this on a Gameboy?
How to get emoji in VS code
What do you mean?
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..
Cool. Can I get the Complete Source code
The GitHub link is in the description
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
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
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
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?
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! 🙏
Amazing! You actually manage to get this out lol
What do you mean 😅
@@codinginflow u had a reddit post remember :P
@@lycan2494Which one are you referring too? I have lots of Reddit posts 😅
🙏👍
Enjoy 😊
@@codinginflow Please add it to the playlist; thank you!
@@JMRVRGS Thanks for the reminder, I'll do it in a bit
1.02.22 with one 's' 💀
what
@@codinginflow At 1:02:22 you said that 'as' with one 's' which is funny even if it's out context joke it was amazing
@@codinginflowsorry if I mentioned any unnecessary things
@@devp-sriram now I remember 💀
+
I hope that's a like 💚
"like" was too)
two years (+-) ago found some answers about android stuff in your videos.
just want to support the channel
@@Chernov1984 Thank you bro
Did you just describe javascript users lunatics??? 😂😂😂
vanilla JS, yes 😆
EDIT: nevermind, i realized that the hamburger only activates at a certain screen width haha
Question:
in NavBar.tsx, but the Hamburger menu isn't there and the Hello link is just adjacent to the NextJS Image Gallery link. any likely reasons why it isn't showing up even with the same NavBar.tsx?
Yup! In Bootstrap, you can set the breakpoint for the hamburger icon via a prop on the navbar.