Next.js Static Site Generation (SSG) Tutorial 

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)?

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

@@r0mankon nice one, thanks i will take a look, it seems some things has changed for good in next js.

@@HarryManchanda i love the future

I was about to say the same thing. I even use console.table({ myVariable }) to have a nicer output :p

^ 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.

Yeah. I had to do mine another way. GitHub.com/DNature/divinehycenth.com

why would you need useEffect on Next.js?

@@atsourno if you want to fetch a resource/send a request client side.

use eslint, tslint is deprecated

I don't think so

The only reason why I've stayed away from Gatsby - too much bundled in.

yeah

you can't

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

twitter.com/benawad/status/1242475931173883904

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

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!

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.

is vim worth learning? yes do I still like VSCode? yes, which is why I mix them

Because I am not able to import fs in the [slug].js file

because I hide it

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?

no idea

github.com/zeit/next.js/tree/canary/examples/with-apollo

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 :)

yes

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

I haven't yet

gist.github.com/benawad/20c6c8f21dced3a31401c8eb750f9f62

yes, everytime!!