I was using incorrectly in the index.js page when navigating to dynamic pages you need to use href and as prop: nextjs.org/docs/api-reference/next/link#dynamic-routes should be: I updated the code on GitHub
Great video! One thing I would add is that when you build your static site, not alone the static HTML is rendered for pages using getStaticProps, but also next.js create a "virtual" API that serves JSON so that when your app is running, once you've loaded your first static page, the app will act like a normal client side react app. Hence the importance of the "as" prop in Link. If not use correctly it doesn't act like a SPA link but rather like a normal anchor tag. It's even worse when you use SSR as each page will be rendered on the server with browser refresh instead of just behaving like a SPA.
@@jeromesnail yep, but this is avaialable only with NextJS server right? Like they way Ben showed here - it is static site, as done in PHP or Python. The thing u r talking require NextJS to handle thos requests and can't be deployed to CDN easily without Vercel right? At least I am trying to find way to do this now, and didn't succeed yet. Do u have any ideas how to serve content of .next build folder from cdn without actual Next or Node server? Or at least with Nginx, not cdn?
@@jeromesnail because as far as I tested locally - Next gives u very low RPS like 10 (at least for our project, not very hard IMO) which is not enough for prod. From what I read - Vercel deploy each page as Lambda function, so it can scale it easily but what if I don't wanna use Vercel(Ziet)?
@@luismunoz9126 Yeah. but I believe those are not impossible to do. like offline support with "next-pwa/cache" or "next-offline". There should be for image optimization too. check out official examples... github.com/vercel/next.js/tree/canary/examples
Basically you have nothing to do. Just use getStaticProps on your static pages, getInitialProps or getServerSideProps on your SSR pages, Next.js will do everything for you when you build you app, giving a summary of what pages are static, what pages are server side rendered. You can even export just the static site with next export, and put the output on a CDN, the app will work with static pages rendered at build and the rest of the app acting like a normal react app (without SSR). It's pretty amazing how easy Next.js is.
Thanks for this great introduction to static site generation using Next.js. I'm an experienced React app developer and I think that Next.js might be a great tool to build simple websites in the future for me.
Thanks Ben for an excellent and succinct overview of the newest features of nextjs static site creation. Love to see more on Nextjs - working with some css to make it look great. (Try Tailwind or Chakra!) and remote data fetching using an open source CMS or Database like Hasura or Strapi or NetlifyCMS (community version) . You are a spot on teacher... .
Thanks for the awesome video! Since getStaticProps & getStaticPaths are async function you can actually use await fs.promises.readFile(...) this won't block the event loop.
Really strange my html does not render correctly. If for example I put an inside the dangerouslysetinnerhtml, it renders it as plain text but when I click on inspect on chrome it shows the button tag.
When I open the exported html files on the browser they dont work properly. I don't understand why do we have to serve them with "npx serve out" if they are static files?
Hi Ben, thank you for the video! I am trying to export the static HTML page so I can use it elsewhere, but for some reason my out folder doesn't contain the html file itself, only the other files. Is there a way to fix this problem?
Just started learning TypeScript today in the post quarantine world. What do you use TS or ES lint for typescript? Does ESlint have good enough linting for TS?
Ok its static site i understood thanks. But after deployment. What if i added a new post on my server. Then should i need to rebuild & deploy it again?
is SSG only works on dynamic paths? And if it is not only for dynamic paths then Is this getStaticPaths and getStaticProps functions renders when component render or Next renders it when any pages of app renders if it is in different components too, suppose I want to generate all components of pages folder and my SSG functions are in Pages > movies.js component then will it work? will it generate all of my pages? or it will generate only when movies.js component renders?
Great vid, thanks. How would it look like for hybrid static + client (no ssr) REST API call app ? Should I simply call the REST API dynamically and add the content? Is it a good practice or there is some more Next.js magic?
If I build a SSG website that allows users to upload blogposts via a form and then create markdown files, how will the website update? Do I need to deploy every minute?
Hi Ben, now that Nextjs has static site generation, wouldn't that be the same as Gatsby? Nextjs does have an extra implementation in the form of dynamic server side rendering though. Personally, i find Gatsby easier to implement static sites with its in-built GraphQL and plugins
Great video, Ben! Thanks for it. Do you know if is possible to do incremental builds/exports? I mean, in case you have new or updated posts, only these will be generated, leaving untouched the rest. I think that will be really helpful when you have a lot of posts.
Hi Ben - thanks for another awesome video. I'm building a portal that has both public content and content behind user login. I was thinking if I use next.js SSR for the public content and then next.js SSG to serve a react CSR SPA (normal react app served using SSG). Is this a stupid approach and/or is there a better way to have use SSR and CSR on the same portal? PS: I'm completely new to next.js. My motivation is to have better SEO for the public pages by using SSR and then minimize the complexity of the private pages by using standard react (CSR) for those.
yes if that gets to the point where it is too slow, that's where you might want to generate the pages at runtime when requested instead of at build time
I don't know if Gatsby user are tempting with this cool feature from Next.js :D but imo they will stick to Gatsby because Gatsby has a lot of cool plugins
Nice content. I’m working on a blog with next.js right now and I’m having some problems to deploy it in other folders than the root folder of my FTP. You something that can help me?
Excellent! I was reading the Next.js docs, but I didn't understand a thing. What if I have an e-commerce, and this e-commerce has thousands of products, but I need to generate those products pages for SEO, which approach is good for it?
quick question: if you would have like a hundred blog posts in .md form, and you would want to display the latest 5 posts on your /home... how would you know which ones are the latest? My idea would to add a "published" parameter to each .md and then when you map through the files in home's getStaticProps, just check that parameter. Is that a good idea? or how would you do it?
@@Sankaritarina89 another way could be to write each file name to a separate text file and then just read the last/first 5 lines of the file - this way you don’t need any sorting
@@erfer that sounds good too. My situation is that I grabbed all the Blogposts from my wordpress and saved them as individual JSON files. They already have the publish date, so that makes it easy. I already got a working prototype for my blog with static next js last night. All good. Next js is amazing. I had not used the static feature before but it is amazing and so easy!
@@bawad Decided on this solution, might be of interest to others: // Function to convert string to Title Case const titleCase = (str) => str.replace(/\b\S/g, t => t.toUpperCase()) // Wrap the slug in the function and remove the filename hyphens // JSX slugs.map change {slug} to: {titleCase(slug.replace('-', ' '))} Result: clean titles from dirty slugs. lol Feedback/criticism welcome :)
I have a couple questions about nextjs and if anyone with experience can answer them I would appreciated it. I know next js can be used for front end and back-end but what I don't understand is what's the benefits of using it for front end only with a django or php backend.
Thanks for the introduction. Could you help answer why next.js has so many labor work? I mean you have to do all kind of stuff. In my perspective, next.js should provide all the things you've done in this video. Users just need to add more md files.
@@bawad I think you misunderstood my question. I don't say next.js is not good. I just want to know why next.js choose this way (labor work in my opinion), what is the benefit of doing it?
what happened to vim or neovim? r u not using those? I see that u have vscode vim. I am new to vim and wanted to learn vim, but did u stop using it altogether? was there some problem with it? I am not sure if I should learn vim, hence the question
I was using incorrectly in the index.js page
when navigating to dynamic pages you need to use href and as prop: nextjs.org/docs/api-reference/next/link#dynamic-routes
should be:
I updated the code on GitHub
Great video!
One thing I would add is that when you build your static site, not alone the static HTML is rendered for pages using getStaticProps, but also next.js create a "virtual" API that serves JSON so that when your app is running, once you've loaded your first static page, the app will act like a normal client side react app. Hence the importance of the "as" prop in Link. If not use correctly it doesn't act like a SPA link but rather like a normal anchor tag. It's even worse when you use SSR as each page will be rendered on the server with browser refresh instead of just behaving like a SPA.
cherto!! Great video!
Hi Ben, thanks for catching that! I don't see the change on github index page - or is it somewhere else?
@@jeromesnail yep, but this is avaialable only with NextJS server right?
Like they way Ben showed here - it is static site, as done in PHP or Python.
The thing u r talking require NextJS to handle thos requests and can't be deployed to CDN easily without Vercel right?
At least I am trying to find way to do this now, and didn't succeed yet. Do u have any ideas how to serve content of .next build folder from cdn without actual Next or Node server? Or at least with Nginx, not cdn?
@@jeromesnail because as far as I tested locally - Next gives u very low RPS like 10 (at least for our project, not very hard IMO) which is not enough for prod.
From what I read - Vercel deploy each page as Lambda function, so it can scale it easily but what if I don't wanna use Vercel(Ziet)?
Add 'utf8' as a 2nd argument to readFileSync and will return a string
This is so much easier then Gatsby. No plugins, no configs, no bloat. It just works. ✋😌👌
No plugins, no Image optimization, no offline support, etc.
@@luismunoz9126 Yeah. but I believe those are not impossible to do. like offline support with "next-pwa/cache" or "next-offline". There should be for image optimization too.
check out official examples...
github.com/vercel/next.js/tree/canary/examples
@@rokonzamann nice one, thanks i will take a look, it seems some things has changed for good in next js.
@@HarryManchanda i love the future
You can do `console.log({ files })` and `console.log({ paths })` to retain the variable name :)
I was about to say the same thing. I even use console.table({ myVariable }) to have a nicer output :p
Great video!
The SGG and SSR part of next is something to figure out. Please upload more on Next.js ! Keep up the great work
Great overview, would love to hear more about how we can use SSR and Static in a hybrid app
^ this! great video btw :)
how would you explain what is a hybrid app?
@@temirzhanyussupov6997 a mix between static sites and webapp.
Basically you have nothing to do. Just use getStaticProps on your static pages, getInitialProps or getServerSideProps on your SSR pages, Next.js will do everything for you when you build you app, giving a summary of what pages are static, what pages are server side rendered. You can even export just the static site with next export, and put the output on a CDN, the app will work with static pages rendered at build and the rest of the app acting like a normal react app (without SSR).
It's pretty amazing how easy Next.js is.
Thanks, it helped me a lot to understand the whole process. One detail should noticed, replace(/\.md$/, '') instead of replace('.md', '')
Thanks for this great introduction to static site generation using Next.js. I'm an experienced React app developer and I think that Next.js might be a great tool to build simple websites in the future for me.
This is exactly what I was trying to figure out on my own. Thank you!!!! A nice bonus video would to be setting it up with netlifycms! 🤞
Yeah. I had to do mine another way. GitHub.com/DNature/divinehycenth.com
never had a need for next, but now I do - this vid is helpful... next up - to see what changed in two years :)
So glad Next added dynamic routes. It's actually so good now.
I love the way Next.js handle SPA, SSG and SSR seamlessly. To me it's much more simple than Gatsby...
I don't think you need to import React, Next js does that for you. Unless ofc you need sth like useEffect, ...
why would you need useEffect on Next.js?
@@atsourno if you want to fetch a resource/send a request client side.
Thanks Ben. That helps a lot. Please create more videos on NextJS
Thanks Ben for an excellent and succinct overview of the newest features of nextjs static site creation. Love to see more on Nextjs - working with some css to make it look great. (Try Tailwind or Chakra!) and remote data fetching using an open source CMS or Database like Hasura or Strapi or NetlifyCMS (community version) . You are a spot on teacher...
.
+1 For more Next.js and Headless CMS etc.
More Next tutorials please! 🙏
Thank you for this work.
Great video Ben! I'd apreciate a video on upload files using next.js. Great job.
Great job! I look forward to the next tutorials about Next.js !
This is going to be a game changer! I have been waiting for this.
Thanks for the awesome video!
Since getStaticProps & getStaticPaths are async function you can actually use await fs.promises.readFile(...) this won't block the event loop.
Awesome!!! Im starting ssd with next.js and your video helpe me much!!
Can you show how to implement a dark mode in a next js app from scratch ?
Very nice, I was planning to check out NextJS. Currently just spitting out a CRA app and that's probably not a good idea.
I definitely want more nextjs content. I have a cra that I want to convert to a ssr app.
Amazing video, very clear and easy to follow. Thank you!
Really strange my html does not render correctly. If for example I put an inside the dangerouslysetinnerhtml, it renders it as plain text but when I click on inspect on chrome it shows the button tag.
Great video, would love more about Next.js, have a nice day
Thank you, i have better understanding what ssg is. Salut!
As always, thank you Ben
When I open the exported html files on the browser they dont work properly. I don't understand why do we have to serve them with "npx serve out" if they are static files?
Hi Ben, thank you for the video! I am trying to export the static HTML page so I can use it elsewhere, but for some reason my out folder doesn't contain the html file itself, only the other files. Is there a way to fix this problem?
f'ing perfect timing man, thanks again
More Next.js content, please.
Just started learning TypeScript today in the post quarantine world. What do you use TS or ES lint for typescript? Does ESlint have good enough linting for TS?
use eslint, tslint is deprecated
thank you for the video, clear
Ok its static site i understood thanks. But after deployment. What if i added a new post on my server.
Then should i need to rebuild & deploy it again?
is SSG only works on dynamic paths?
And if it is not only for dynamic paths then
Is this getStaticPaths and getStaticProps functions renders when component render or Next renders it when any pages of app renders if it is in different components too, suppose I want to generate all components of pages folder and my SSG functions are in Pages > movies.js component then will it work? will it generate all of my pages? or it will generate only when movies.js component renders?
How if i want to .map the entire .md content for the sake of listing the entire blog so user can read the title, description before go to the blog ???
Great vid, thanks.
How would it look like for hybrid static + client (no ssr) REST API call app ? Should I simply call the REST API dynamically and add the content? Is it a good practice or there is some more Next.js magic?
If I build a SSG website that allows users to upload blogposts via a form and then create markdown files, how will the website update? Do I need to deploy every minute?
Hi Ben, now that Nextjs has static site generation, wouldn't that be the same as Gatsby? Nextjs does have an extra implementation in the form of dynamic server side rendering though. Personally, i find Gatsby easier to implement static sites with its in-built GraphQL and plugins
Please make a complete course on next.js
Ohk so my website (webapp) view is going to be somewhat different for everyuser (site can be modified and have plugins) so should i use SSR or CSR?
Great video, Ben! Thanks for it. Do you know if is possible to do incremental builds/exports? I mean, in case you have new or updated posts, only these will be generated, leaving untouched the rest. I think that will be really helpful when you have a lot of posts.
I don't think so
Hi Ben - thanks for another awesome video. I'm building a portal that has both public content and content behind user login. I was thinking if I use next.js SSR for the public content and then next.js SSG to serve a react CSR SPA (normal react app served using SSG). Is this a stupid approach and/or is there a better way to have use SSR and CSR on the same portal? PS: I'm completely new to next.js. My motivation is to have better SEO for the public pages by using SSR and then minimize the complexity of the private pages by using standard react (CSR) for those.
Once I have a million markdown files, and I added a new markdown file, does the compilation process include the million other markdown files again?
but what if I have lots of posts and when I wanna add/edit/delete a post, should I rebuild the whole project again?
yes
if that gets to the point where it is too slow, that's where you might want to generate the pages at runtime when requested instead of at build time
Hey Ben, good video. Just a quick question, what are the manifest files for in the export static html files? Is there any way to remove them?
Hey Ben, great content. Could you please do a new tutorial series for react native? I'd love that. Thanks
Very cool - thank you
I don't know if Gatsby user are tempting with this cool feature from Next.js :D but imo they will stick to Gatsby because Gatsby has a lot of cool plugins
The only reason why I've stayed away from Gatsby - too much bundled in.
which extension is he using to get his terminal to look like that? if anyone knows the answer, I'd really appreciate it
Thank you. So clear and helpful. I like and describe :)
like your Videos, next.js is very interesting, please more
Hi, I face this error prnt.sc/vwbto1. how can I solve it?
my Lebanese homie is back at it again
Nice content. I’m working on a blog with next.js right now and I’m having some problems to deploy it in other folders than the root folder of my FTP.
You something that can help me?
Great video! Could you talk more about how to deploy server-side-render Next JS app to Netlify? Thanks
you can't
Ben great content as always. ty! . Now, If a client comes to you for a website would you say next Ssg is read for production sites?
yeah
Excellent video, keep it up
great video, please make a part 2 of it showing how to use SSG with MDX
twitter.com/benawad/status/1242475931173883904
Can i ask you guys which hosting are you using for a nextjs app?
Awesome video, just when I wondered how to do this... (TH-cam knows to read minds I guess now)
Excellent! I was reading the Next.js docs, but I didn't understand a thing. What if I have an e-commerce, and this e-commerce has thousands of products, but I need to generate those products pages for SEO, which approach is good for it?
this approach would work, I think thousands is doable at build time
@@bawad So will you iterate into thousands products fetched from an api? This seems weird hahaha
Thanks so much
quick question: if you would have like a hundred blog posts in .md form, and you would want to display the latest 5 posts on your /home... how would you know which ones are the latest? My idea would to add a "published" parameter to each .md and then when you map through the files in home's getStaticProps, just check that parameter. Is that a good idea? or how would you do it?
Maybe sort the items by created and just grab the first 5?
@@erfer yes, that was my idea too. It works as intended
@@Sankaritarina89 another way could be to write each file name to a separate text file and then just read the last/first 5 lines of the file - this way you don’t need any sorting
@@erfer that sounds good too. My situation is that I grabbed all the Blogposts from my wordpress and saved them as individual JSON files. They already have the publish date, so that makes it easy. I already got a working prototype for my blog with static next js last night. All good. Next js is amazing. I had not used the static feature before but it is amazing and so easy!
Hi, Ben. Any thoughts why react devtools are unable to parse my next.js project?
no idea
this is great
Ben goes full Texan 11:33
Why I can not see node_modules in your folder structure ?
because I hide it
great video
Awesome! How would you go about deploying a site that has both SSR and SSG?
I would use Zeit Now also known as Vercel
@@bawad Thanks for the reply! Unfortunately, I'm not sure that's an option for me. We have to use AWS and/or Kubernetes at my company.
Can we get more of Next.js please...
import marked from "marked" not working for me
How can you use the front matter title to make cleaner links? using the filenames makes the-slugs-look-ugly. :)
slugs usually look like that, but you could make the slug whatever you like by parsing the front matter info in getStaticPaths
@@bawad Decided on this solution, might be of interest to others:
// Function to convert string to Title Case
const titleCase = (str) => str.replace(/\b\S/g, t => t.toUpperCase())
// Wrap the slug in the function and remove the filename hyphens
// JSX slugs.map change {slug} to:
{titleCase(slug.replace('-', ' '))}
Result: clean titles from dirty slugs. lol
Feedback/criticism welcome :)
I have a couple questions about nextjs and if anyone with experience can answer them I would appreciated it.
I know next js can be used for front end and back-end but what I don't understand is what's the benefits of using it for front end only with a django or php backend.
How to do it with a variable folder as [slug] then the folder containing [slug].js
Because I am not able to import fs in the [slug].js file
please do a firebase fetching data with firebase.database()
Thanks! Do you know how to use Apollo client in this?
github.com/zeit/next.js/tree/canary/examples/with-apollo
Thanks for the introduction.
Could you help answer why next.js has so many labor work? I mean you have to do all kind of stuff. In my perspective, next.js should provide all the things you've done in this video. Users just need to add more md files.
give gatsby a try if you want that
@@bawad I think you misunderstood my question. I don't say next.js is not good. I just want to know why next.js choose this way (labor work in my opinion), what is the benefit of doing it?
I am doing well today
what happened to vim or neovim? r u not using those? I see that u have vscode vim. I am new to vim and wanted to learn vim, but did u stop using it altogether? was there some problem with it? I am not sure if I should learn vim, hence the question
is vim worth learning?
yes
do I still like VSCode?
yes, which is why I mix them
Thanks~!! How to add image in .md file~?
Is it considered to be JAM stack?
yes
does this play nice with ZEIT's now/have you ever used now.sh??
yes and yes
Next.js and Zeit now always work perfectly together, because they are both built by the same team.
@@bawad thanks for the reply (many 'tubers don't). love the channel
Did u try it with TypeScript and GraphQL? They added Generics in next version 9.3.1... github.com/zeit/next.js/issues/11033
I haven't yet
What about MDX? :-)
gist.github.com/benawad/20c6c8f21dced3a31401c8eb750f9f62
Can you do one on Yarn and now to use it.
Here's how you deploy Next.js (React framework) on Azure Static Web App Service th-cam.com/video/LbUP8VZFfuU/w-d-xo.html
You writing JS is hurting my eyes. How are there no ".ts" files?
Anyone keep having this lame ad with boobie girl "So you wanna be a frontend engineer at google " 🤦♂️
yes, everytime!!