Hi Dave, thanks for your high quality content. Is there a possibility to create a NextJS 13(app folder) jwt auth setup using tanstack query and zustand based on the backend you've made in the past. I think redux is overkill, and would be great to see it in action, there are literally no videos explaining these 2 techs. Upvote if you agree :)) Thanks in advance Dave!
Nice little dose of upvotes! There is a possibility for this although it might not be best included in the "beginners" series. It could make a nice follow up that is a bit more advanced.
Hi Dave. Thanks for the tutorials. They're great. I had one problem however. In the page.tsx file in the [userId] folder, I got an error checking for user.name. This happens because now undefined is being returned in getUsers. Changing it to if (!user) worked and it then ran.
When implementing the 404 page logic in generateMetadata and the return of my JSX for the dynamic route to this instead of just checking !user.name. I tried reading the documentation since Im doing this with the latest version of next.js but I couldnt find out if there had been any changes to how this should be implemented. I had to make these changes. 1. const user: User | null = await userData; 2. (!user || !user.name) in the if statement Anyone that knows why? If I didnt make the changes I would either get an runtime error, or if I had an error page that would be thrown instead.
Oof! You got me there! I missed typing the return keyword. The return keyword is needed there. I will update the lesson source code. Thanks for the note!
Hi David, I cannot get not-found.tsx working, it threw error: error - TypeError: Cannot read properties of undefined (reading 'name') in the console log, did I miss anything? I checked your code, it looks the same, thanks.
I think you can explain them morre efficiently with your own server. like we know ssg serve the data what it build in the build process. Can you suggest me what is the best way for a news app where we fetch a tons of data everyday?
We have a development server running here, so I don't understand your comment? A site with frequent new data would likely rely on SSR with ISR mostly. It all depends on site structure and needs. Maybe you have a page that is mostly SSG but one component needs to be SSR. Many possibilities.
Sir, I am using the next js in my project and the project size is huge In the hero page of the project there are a lot of components that fetch data from db using SSR due to it when I open my Website the first fetch gets 17.8kb of data and documents approx in 22sec which is too huge and vercel only allows 10s for page fetch I don't know how to solve this I'm fetching all the data on the server side which is causing the problem Pls help
Hello, Dave! One question, in the Next docs it is said that: ”During revalidation (ISR), generateStaticParams will not be called again.” Does that contradict what is said in this video?
All this is kinda confusing So basically, server components run only on server and if we use client side things like hooks/events then we need to us client components and everything is SSG but when dynamic routes are used, it is SSR, which we can convert to SSG if we provide params in advance if data changes frequently, we can use ISR by using revalidating option in fetch() Am I right?
Great content, i have a question I added export const dynamicParams = false; To page.tsx or layout.tsx of [userId] folder But when i try param that not returned by generateStaticParams function, it doesn’t return 404 page ?!
I am still trying to rap my head arround SSG. I understand it but what if /users keeps changing due to more users being added ? How does Next js handle that ? If the answer is to turn it to ISR, how does that work in this case, since the page has already being generated statically at build time
ISR uses a revalidate value. When revalidation is triggered, the data is fetched again. The new pages available from new data will be SSR until the site is built again and the build uses generateStaticParams which will then create SSG pages for new data. Later in this series, we take a deeper dive into Revalidation, the settings, exactly how it works and how to do it on-demand.
In Next.js 12 I remember if we use ISR, after the build it shows that the particular page is using ISR mechanism, but in Next.js 13 it doesn't show any message like that. Is there any way we can know that a particular page is using the mechanism of ISR. or am I missing something?
You will possibly use ISR with SSG pages. The time increment will let Next.js know when to invalidate the cache. A request _after_ time has expired triggers the revalidation. Therefore, stale-while-revalidate applies. The first request beyond time gets stale data but triggers the revalidation. When revalidation completes, fresh data is provided.
Hey @@DaveGrayTeachesCode or anybody who knows the answer. I'm struggeling with SSG and the build/export process. I managed to generate the "out" folder by adjusting the next.config file. Since version 13.4 or so, you don't have to include a "export" script in the package.json, you do it via the config file. My question is. The only reason for SSG is to deploy the site as a static one, or am I missing something? My idea was to deploy a static website (SSG with NextJs), on my server which does not support NodeJs. Why I'm confused: When the topic SSG is talked about, I would expect to see where my static files are generated (in which folder etc.). I remebered from older NextJs versions that the "out" folder was created automatically after the "build" process and when I started to get into NextJs again I was confused about that part (beside other changes aswell). Therefore I was searching for RU-vid videos and documentations regarding that. All that said, I liked that video very much!
Thank you - Yes, you are discussing two different concepts / approaches here. You can learn about starting with a static site at the following link but note the unsupported features listed near the bottom of the page: nextjs.org/docs/app/building-your-application/deploying/static-exports Using SSG and generating static params is a different approach that the static export described at the link above and both dynamic routes and ISR would not be supported.
@@DaveGrayTeachesCode Thank you for the answer and link to the docs. Is there any reason for me to not just export a static site with SSG, when I'm not using those features listed. Although I would like to use the Image API, which is kinda sad. What other way would you recommend for image optimation without SSR? Is there a way for me to utilize WebP images?
I look things up every day. I remember an idea or overall concept, but I don't memorize everything. Einstein said "Never memorize something you can look up." and I completely agree with that.
You need the recommended TypeScript prerequisite course: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gieEQFIfgYc.html You will learn about the return types and much more in that course.
Hi Dave, Is there any point in storing the promise (const usersData: Promise = getAllUsers();) and then waiting for it (const users = await usersData;) Why not just do : const users = await getAllUsers(); ? Thank you!
"Prior to the 60 seconds..." No. That is the time you set. Also note, if SSG it is static so you won't see changes after the 60 seconds unless you refresh. If you stay in the app, you will see a cached version by default unless you set cache on fetch to 'no-store'. These strategies are good for data that doesn't change often or need to immediately reflect changes.
If the root layout has a fetch request that is not cached in any way, meaning the root layout component is re rendered on the server for every request. Does this mean that now all my pages will behave like server side rendered? Even if I am caching data and re validating the request every 5 mins at the page level. This will get over ridden by the root layout component that requires and re render every request? Or does next js know how to cache all request that are made depending how you cache them?
Interesting question. I have never found a need to request data in the root layout component. You might want to in the root page instead. It would not impact the other route segments.
hello. Dave. Thanks for your great content. By the way. I'm having serious problem with images. I've created a website by building in SSG(in config file, output: "export"), but it keeps failing to find the path to the image. It works in dev mode, but when I build it and generate it as html, it can't find the image paths. What should I do in this case? All my images are in the public folder, and my next.js version is 13.3...
What am I missing? If user is undefined, there’s no name property. If it’s not there JavaScript can’t check if it’s falsy! It’s supposed to throw an error! How is it returning the not found page for you!?! You also mention an empty object when setting up the notFound(), where is that empty object coming from when you are returning undefined!?!🤷🏾♂️
Something am trying to understand Dave. generateMetadata async function returns a promise. But it’s already awaited inside the function so it should just return the metadata object but this is not the case. I wonder why
When I write a function in Vanilla JS, I usually not only _await_ the response, but then I also _await_ response.json() before I return ...looking at the docs example, that 2nd await isn't really happening so a promise is being returned (as we indicate with TypeScript). We also didn't use the await on the fetch but instead of a separate line. Reference: beta.nextjs.org/docs/api-reference/metadata#generatemetadata
"Creating an optimized production build .TypeError: Found invalid object in transferList" anyone having this error while building the app after implementing SSG?
Hi Dave, I have a question regarding the users page. The /users page is shown as a SSG page when you run npm run build and I do not understand how can the static page be updated when the users data is changed on the backend since users page is only built one time and is cached in the server to be reused. Thank you!
This is where ISR comes in. Incremental Static Regeneration based on a revalidation time. This video shows and explains some of that. A later video in the series takes a deeper dive into revalidation. Keep going! 🚀
HI Dave, I came across this page looking for a solution to build my blog going headless combined with wordpress DB. I have over 700+ blog posts though so I don't think I would want to statically generate them each time I release a new post each week. Would that method you proposed for ISR in your video be the way to go? DO you have any examples or tutorials I can follow to make this happen? Thanks so much for the great video!
I don't have a tutorial in this series with a CMS, but you do have the right idea with ISR. I think the Next.js site explains it well here: nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration
A comment on a recent video - the blog project one in this series - brought your question back to my mind. Colby Fayock has a great article on what you are asking about: spacejelly.dev/posts/how-to-update-static-content-in-next-js-automatically-with-incremental-static-regeneration-isr/ ...also the solution the other viewer had was to use this: beta.nextjs.org/docs/api-reference/segment-config#revalidate
@@DaveGrayTeachesCode Dave can't thank you enough for looking this up. I did find Colby's repo a few days ago but the segment-config I had not seen yet! Looks like some really new stuff is coming down the pipeline from Next.js!
Hello, please help. I can't figure out if I'm thinking right in this situation ->. There is an article for whatever it is - it will be static and server. But she has comments, I have such a template in my head, please rate it. I can render these comments as dynamic and client-side components, using RTK-query to take advantage of all the goodies of RTK-query. Or is ISR better?
Yes, but with RTK-query it's easy to do an optimistic update, let's put an emoji on a comment. And with ISR, this will have to re-render the whole page, which is better in this situation, thanks in advance. You help me a lot, in addition to reading the documentation, I only watch you and another RU-vidr
Hi @Dave Gray thanks for great tutorial. Until this video I had no problems in my code, but when I tried know to create not found page, in console I'm getting error which said: cannot read properties of undefined (reding title // api is different so please don't matter about property name in you case it is name). Do you know maybe how to solve this, every line of code is like yours?
When I click on "users" all users are fetched at once but when I click on a single user like "Leanne Graham" then this fetch again , I don't know why this is happening though I also match my code with your code but still I am getting this re-fetching problem and also instead of getting not-found or 404 page when user.name not found , I am getting 500 internal server error. Please give me a suggestion to solve this problem.
If you just created your project, it has version 13.3 which still has bugs. Type npm I next @13.2.4 in your terminal to install that version. Then see which problems remain.
@@DaveGrayTeachesCode This actually helped me experience the difference (which is really amazing to see!), as I was first on 13.3 - thanks! Please keep up with the amazing content!
on line: if(!user.name) I got error: Cannot read properties of undefined (reading 'name') I have no idea why, I copied your page from github but it's the same🤔
Sounds like your user value is undefined. It shouldn't be happening, but you'll want to find out why it is. At the same time, using optional chaining like user?.name can prevent that... but other errors may follow.
@@DaveGrayTeachesCode what he meant was in "...if (!user.name){return notFound}" Next gives now "Cannot read properties of undefined (reading 'name')" instead of 404Page....Now it wants if(!user)
You could make server-side requests with axios, but Next has extended fetch to work with their caching system. On the client side, they recommend SWR or React Query.
First thing I would do is roll back to version 13.2.4 for now just in case this is an issue with the newly released 13.3. In your terminal window: npm i next@13.2.4 ...if the error persists, compare your code to my code in the course resources. If you don't see a difference, use a tool like diffchecker.com
