I really appreciate your contents. I've learned a lot from this channel since then. I really love that these lessons are divided into parts and sections. It gives me the time to actually practice them at my own pace and not follow and simply watch a full 10-24-48 hour videos.
Hi @DaveGrayTeachesCode i watched your videos and I am stuck at tags and there's no video on tags in your playlist can you please make one as I am trying to work with shopify and creating custom app I want to implement tags too so please
Hi @DaveGrayTeachesCode I watched your videos and I am stuck at tags there's no video on tags in your playlist can you please make one I am trying to work with Shopify and creating the custom app I want to implement tags too so, please
Hi, I have used on demand revalidation. It invalidates the cache. But the next day its showing me a very old version. Then we have to hit the revalidate URL again to clear the cache. Any workaround for the same.
I am currently working on NextJS application where I want to cache pages on cloudfront (don't ask me why). Anyway, I want to set Cache-Control's maxage to 300 seconds. I know I can do that by forcing pages to be dynamic and setting header in next.config.js but in my specific case I cannot do that. So my second option is forcing pages to be static, in this case maxage is set to 60 seconds (this is also true with using export const revalidate). Now my question is, by using second option, is there any way to set maxage to more than 60 seconds.
Can anyone help me, I am creating a e commerce with sanity, When I add a new product I made a button that send a revalidation with path = '/' the problem is the new product only shows on the homepage and not on the category page and all product page, How can I solve this problem, is there a way to revalidate the entire app or should I even revalidate entire app? help plz
Hi! My problem is I have a update button component which updates database. Then i use revalidation api to update static generated dynamic page (with getStaticProps, getStaticPaths) with updated data. After revalidation i use router.push() to go to detail pages (with new data expected) but I need to make manual refresh to see new results. Its seems to be a common problem but maybe you have solution about that?
CORRECT! I see a lot of people complaining about that but I see zero effort in getting that resolved. This is the CORE of Next JS, having to refresh the page is not how this is supposed to work. I've been struggling for WEEKS thinking I was doing something wrong. Revalidate works on page RELOAD but not on link/route change. That sucks.
I have built a CRUD module. When I add a new record, I redirected to Listing page after successfully adding. But in the Listing page new record does not appear instantly, but it appears after 1 refresh. Can you guide me how can I see added records right after adding?? Process:- Add new record >> Save through API >> Calling on-Demand Revalidate >> router redirect to Listing page >> Old records ! >> Manual Refresh >> getting new records. !! Please help
docs changed now and i am struggling now there is everything in app/api/revalidate/route.ts and revalidatePath + revalidateTag added and one more problem is what is difference in NextRequest and NextApiRequest getting error with res
Hi, thank you for the great content. I have a question. If i get this correctly, In this way, it's revalidating only the given path. How can we revalidate multiple paths at the same time? For example, I have shown a few testimonials on the home page and all the other testimonials on another page. So, if I add a new testimonial, I need to revalidate both the '/' and '/testimonials' paths. How can I do that?
Hey Dave you are awesome! I really appreciate your efforts and salute you, I try much content for authorization using next-auth but I couldn't, I believe in you that you can make perfect authentication system like we built in express, Thanks in advance and waiting for same
Thank you so much we do appreciate your content. Please Dave can create an ecommerce project with a headless cms . that project will wrap most of next js features
Thanks for this great video. How can you update your blog post markdowns without rebuilding your site? Is this possible knowing that the site is in CDN? Thanks
Hello Dave, Can you please help me with one query ? After adding new blog post is it necessary to run the API manually from Postman / Thunder Client ? Or it would be handled by Next JS Thank you !
If you want to use On-Demand Revalidation for an immediate up, you should send the revalidation URL. You can do it with Postman, ThunderClient, or even put it in a browser URL bar. Otherwise, you can just wait until the revalidation time limit has passed and then refresh twice. I explain this in the video.
But i have some problems like when a static page is created on after building, suppose I am your user and not I registered to your website now my name should also updated ok.. when soppose if delete my account or change it or name now the problem is the old page is not deleted its still there with the last data available how to fix that?
You do not generate static pages with individual user information. Those portions of your application are interactive. Revalidation is for previously generated static content that needs to refetch new data.
They aren't fully endorsing the app directory for production yet, but it has to be close. Note that Next 13 is now part of the stable docs, but the app directory is not yet (as of today 4/25/2023)
Hey Dave thanks for this video! Would really appreciate a video on mutations and how to properly use the router.refresh function on statically generated page that has client components. Looking to implement a like button that immediately shows the incremented likes once the like button is pressed. Thanks!
Hello, base on the docs for the new version import { revalidatePath } from 'next/cache'; export async function GET(request: NextRequest) { const path = request.nextUrl.searchParams.get('path'); if (path) { revalidatePath(path); return Response.json({ revalidated: true, now: Date.now() }); } return Response.json({ revalidated: false, now: Date.now(), message: 'Missing path to revalidate', }); } this is how to revalidate on demand in route handler right ? so when ever the function revalidate path calls it actually takes care of revalidation ? but it is a good way for something like form submitting ? like we add a new post or data and we can see a new data added after a refresh ?
I cover the new revalidation in lesson 12 so keep going. How ISR works: the 1st request triggers the revalidation but delivers stale data. Any following request gets the new data.
It takes 2. The first triggers the revalidation. The second sends the new data after revalidation is complete. If I remember correctly, I explain this because it can be confusing.
when running "npm run build" can some one help explain what the difference between static and SSG? aren't they the same thing? ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
Great content! Is there a reason why after I build my project, the data from local database doesnt update the same as in "npm run dev"? Could this have to do with revalidation, where in dev its instantly pulling data from my database?
I can only guess about your code from here. The data needs to be available at build time if you are using server component requests. This is especially true if using generateStaticParams. This is also part of the reason you should not make requests from your server components to your own API routes. ..In this tutorial, I show how revalidation works - after the revalidate time has passed, it takes 2 requests to see the new data unless you use on-demand revalidation. I'll be covering mutations soon in case you are editing existing data.
Thanks for an awesome content! any ideas on how the api routes should change when we deploy to production? App builds fine locally but on Vercel it fails with Failed to fetch etc. I have removed the localhost when NODE_ENV === "production" but still.
I think I replied in Discord to you, but I might also add that the config file for routes could help: vercel.com/docs/concepts/projects/project-configuration ..There is not much documentation about deploying the new API routes.
@@DaveGrayTeachesCode Thanks Dave. The problem was that I had the db call in the api routes and I was hitting the api routes from the server component with fetch. And since we are in node and there is no document and no url, the base url was a problem. The solution was to call the db directly from the server component using prisma and fetch data directly from the source. I guess the API routes exist for our client side code. Correct?
Using next 13.3.4 gave me an error on doing GET request for revalidation: 500 Internal Server Error in server console: TypeError: Cannot set properties of undefined (setting 'current') Solution: downgrade to next 13.2.4
Correct. I used v13.2.4 in this video - check my package.json for each video to see the version. In chapter 12, I show the latest revision to revalidation with v13.4
Год назад
I have mess with functions that are not using fetch and all this revalidation thing causes frustration
If you have functions not using fetch, the docs currently recommend using React.cache() for them. Revalidation will apply to the fetch calls.
Год назад
@@DaveGrayTeachesCode btw I tried to use fetch on the server component and could not make it - always ends with "Error: Unexpected token < in JSON at position 0"
Год назад
@@DaveGrayTeachesCode I need that data not to be cached - it caches by default.
Finally someone who teaches caching with Next on a good way. Subscribed! 🙏🏻
I really appreciate your contents. I've learned a lot from this channel since then. I really love that these lessons are divided into parts and sections.
It gives me the time to actually practice them at my own pace and not follow and simply watch a full 10-24-48 hour videos.
You're welcome!
Hi @DaveGrayTeachesCode i watched your videos and I am stuck at tags and there's no video on tags in your playlist can you please make one as I am trying to work with shopify and creating custom app I want to implement tags too so please
Hi @DaveGrayTeachesCode I watched your videos and I am stuck at tags there's no video on tags in your playlist can you please make one I am trying to work with Shopify and creating the custom app I want to implement tags too so, please
Hi,
I have used on demand revalidation. It invalidates the cache. But the next day its showing me a very old version. Then we have to hit the revalidate URL again to clear the cache. Any workaround for the same.
I am currently working on NextJS application where I want to cache pages on cloudfront (don't ask me why). Anyway, I want to set Cache-Control's maxage to 300 seconds. I know I can do that by forcing pages to be dynamic and setting header in next.config.js but in my specific case I cannot do that. So my second option is forcing pages to be static, in this case maxage is set to 60 seconds (this is also true with using export const revalidate). Now my question is, by using second option, is there any way to set maxage to more than 60 seconds.
Can anyone help me, I am creating a e commerce with sanity, When I add a new product I made a button that send a revalidation with path = '/' the problem is the new product only shows on the homepage and not on the category page and all product page, How can I solve this problem, is there a way to revalidate the entire app or should I even revalidate entire app? help plz
Did you find any solution @kasper369
Hi! My problem is I have a update button component which updates database. Then i use revalidation api to update static generated dynamic page (with getStaticProps, getStaticPaths) with updated data. After revalidation i use router.push() to go to detail pages (with new data expected) but I need to make manual refresh to see new results. Its seems to be a common problem but maybe you have solution about that?
CORRECT! I see a lot of people complaining about that but I see zero effort in getting that resolved. This is the CORE of Next JS, having to refresh the page is not how this is supposed to work. I've been struggling for WEEKS thinking I was doing something wrong. Revalidate works on page RELOAD but not on link/route change. That sucks.
I liked the revalidate.ts info and the explanation on including it from any new post from md or cms etc. 🔄 Thanks
I have built a CRUD module. When I add a new record, I redirected to Listing page after successfully adding. But in the Listing page new record does not appear instantly, but it appears after 1 refresh. Can you guide me how can I see added records right after adding??
Process:- Add new record >> Save through API >> Calling on-Demand Revalidate >> router redirect to Listing page >> Old records ! >> Manual Refresh >> getting new records. !!
Please help
docs changed now and i am struggling now there is everything in app/api/revalidate/route.ts and revalidatePath + revalidateTag added and one more problem is what is difference in NextRequest and NextApiRequest getting error with res
13.4.12 everything working but revalidation not working i have to refresh two times doing copy paste as per docs and doing using revalidtedPath
you use NextRequest for the app router and NextApiRequest for the older page routing.
Hi, thank you for the great content. I have a question.
If i get this correctly, In this way, it's revalidating only the given path. How can we revalidate multiple paths at the same time? For example, I have shown a few testimonials on the home page and all the other testimonials on another page. So, if I add a new testimonial, I need to revalidate both the '/' and '/testimonials' paths. How can I do that?
The best tutorial ever! Thank you!
Look like I found everything I need in this video :) Thank you !
Sadly the « const revalidate » is not working on my side 😭
Needs to be "export const revalidate" and can only be checked with a build.. not in development.
Hey Dave you are awesome! I really appreciate your efforts and salute you, I try much content for authorization using next-auth but I couldn't, I believe in you that you can make perfect authentication system like we built in express, Thanks in advance and waiting for same
I do plan to cover auth sometime after this fundamentals series is complete.
Thank you so much we do appreciate your content. Please Dave can create an ecommerce project with a headless cms . that project will wrap most of next js features
Thank you! That might make a good premium course. I'm considering different topics and hope to launch one.
Thanks for this great video. How can you update your blog post markdowns without rebuilding your site? Is this possible knowing that the site is in CDN? Thanks
Thank you, Dave
You're welcome!
Hello Dave,
Can you please help me with one query ? After adding new blog post is it necessary to run the API manually from Postman / Thunder Client ? Or it would be handled by Next JS
Thank you !
If you want to use On-Demand Revalidation for an immediate up, you should send the revalidation URL. You can do it with Postman, ThunderClient, or even put it in a browser URL bar. Otherwise, you can just wait until the revalidation time limit has passed and then refresh twice. I explain this in the video.
But i have some problems like when a static page is created on after building, suppose I am your user and not I registered to your website now my name should also updated ok.. when soppose if delete my account or change it or name now the problem is the old page is not deleted its still there with the last data available how to fix that?
You do not generate static pages with individual user information. Those portions of your application are interactive. Revalidation is for previously generated static content that needs to refetch new data.
Great content thanks! Do you recommend using next 13 for production or is it better to stick with 12 until stable app directory?
They aren't fully endorsing the app directory for production yet, but it has to be close. Note that Next 13 is now part of the stable docs, but the app directory is not yet (as of today 4/25/2023)
Hey Dave thanks for this video! Would really appreciate a video on mutations and how to properly use the router.refresh function on statically generated page that has client components. Looking to implement a like button that immediately shows the incremented likes once the like button is pressed. Thanks!
You are reading my mind. Coming this week!
love to watch !!
Thank you!
so how about route handler , do we call manually in client side to revalidate the blog , pls answer dave 🙏
I suggest using a tool like ThunderClient or Postman to manually call a revalidate when you add new blog content.
Hello, base on the docs for the new version import { revalidatePath } from 'next/cache';
export async function GET(request: NextRequest) {
const path = request.nextUrl.searchParams.get('path');
if (path) {
revalidatePath(path);
return Response.json({ revalidated: true, now: Date.now() });
}
return Response.json({
revalidated: false,
now: Date.now(),
message: 'Missing path to revalidate',
});
}
this is how to revalidate on demand in route handler right ? so when ever the function revalidate path calls it actually takes care of revalidation ? but it is a good way for something like form submitting ? like we add a new post or data and we can see a new data added after a refresh ?
I cover the new revalidation in lesson 12 so keep going. How ISR works: the 1st request triggers the revalidation but delivers stale data. Any following request gets the new data.
10:07 Going through the links did not regenerate the page. Only 2 refreshes work for me.
It takes 2. The first triggers the revalidation. The second sends the new data after revalidation is complete. If I remember correctly, I explain this because it can be confusing.
when running "npm run build" can some one help explain what the difference between static and SSG? aren't they the same thing?
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
SSG receives the generateStaticParams output and static uses no initial props. Both static, but the build is specifying each.
Great content! Is there a reason why after I build my project, the data from local database doesnt update the same as in "npm run dev"? Could this have to do with revalidation, where in dev its instantly pulling data from my database?
I can only guess about your code from here. The data needs to be available at build time if you are using server component requests. This is especially true if using generateStaticParams. This is also part of the reason you should not make requests from your server components to your own API routes. ..In this tutorial, I show how revalidation works - after the revalidate time has passed, it takes 2 requests to see the new data unless you use on-demand revalidation. I'll be covering mutations soon in case you are editing existing data.
Thanks for an awesome content!
any ideas on how the api routes should change when we deploy to production?
App builds fine locally but on Vercel it fails with Failed to fetch etc. I have removed the localhost when NODE_ENV === "production" but still.
I think I replied in Discord to you, but I might also add that the config file for routes could help: vercel.com/docs/concepts/projects/project-configuration ..There is not much documentation about deploying the new API routes.
@@DaveGrayTeachesCode Thanks Dave. The problem was that I had the db call in the api routes and I was hitting the api routes from the server component with fetch. And since we are in node and there is no document and no url, the base url was a problem. The solution was to call the db directly from the server component using prisma and fetch data directly from the source. I guess the API routes exist for our client side code. Correct?
Thank you, Dave and can you make a video where you can upload .md file to that folder
Good request! 💯
@@DaveGrayTeachesCode hope you will make it soon
Hello Dave....🙂 How many videos will be uploaded to finish this Naxt.js course?
I never know. I just follow the content. At least a couple more to go here.
@@DaveGrayTeachesCode Thank you Dave.
Thank you!!!
Welcome!
Using next 13.3.4 gave me an error on doing GET request for revalidation:
500 Internal Server Error
in server console:
TypeError: Cannot set properties of undefined (setting 'current')
Solution: downgrade to next 13.2.4
Correct. I used v13.2.4 in this video - check my package.json for each video to see the version. In chapter 12, I show the latest revision to revalidation with v13.4
I have mess with functions that are not using fetch and all this revalidation thing causes frustration
If you have functions not using fetch, the docs currently recommend using React.cache() for them. Revalidation will apply to the fetch calls.
@@DaveGrayTeachesCode btw I tried to use fetch on the server component and could not make it - always ends with "Error: Unexpected token < in JSON at position 0"
@@DaveGrayTeachesCode I need that data not to be cached - it caches by default.
@ Hi! Did you find a solution since ran into this issue..?
@@shineLouisShine nope...I moved on other things
from scratch
❤ the best ❤
Thank you!
Wow❤
🚀🚀🚀
Hello
👋 Hello!