Next.js Static Site Generation (SSG)
ฝัง
- เผยแพร่เมื่อ 2 ต.ค. 2024
- Next.js can now do static site generation along with server side rendering. I think Next.js will be become my default framework for making websites and I'll probably use Gatsby less.
----
Follow me online: voidpet.com/be...
#benawad
All this while wearing a Gatsby t-shirt, thug life!
Yes, please do a tutorial for how to use SSG and SSR with NextJs, preferably with Redux as state management.
No need for redux, there's already enough tutorials out there.
just google it if you want Next.js + Redux tutorial
Why do you even need Redux anymore? React's context is better.
Yeah but not with redux, go with Context with useReducer, just the native API.
Stick with native API like React context instead of adding a whole Redux library.
You are wearing a gatsby t-shirt.. lol
I'm learning next js now to start using it in my future projects.
ben looks like he’s always holding back a laugh.
Love the videos man!
Man, that is no fun. I have it too (much more aggressively), and it comes as poor taste when someone asks you "so, what do you do?" and your face reacts that way.
so I'm not the only one that uses stacks of books to level my monitor... I used to feel guilty about that lol.
There are a lot of cheap but nice monitor stands you should look into where you can have chargers, laptops and what not underneat for storage, really neat
@@0dyss3us51 why buy a monitor stand when you can achieve the same results for free?
I do the same lol
@@weltmeister that is one argument. Another would be that you could me more organized with something that has space under, but whatever works for you, just a suggestion :)
I started experimenting with Next.js last year and loved it but this is even more a reason to keep using it
Gatsby should join NextJS so we can move on from the react framework war and be more focused and productive
and Vue also should join to React
@@khotambakhromov and javascript also should join to cobol
@@michakotlicki540 lmao
please active the subtitles, i need that.
Kind of
Nice, quick, informative summary of the new Next.js update. Lets see some tutorials! I think both will keep improving as the other updates.
next.js gang
I wish there was a way to switch to nextjs from CRA real quick
Could you share how you handle image optimization in Next.js? That Gatsby plugin is the main reason I chose Gatsby for some projects (and the plugin ecosystem is really good too)
I've never tried to do the same optimizations in Next.js, but if I end up doing it sometime, I'll make a video on it
Nice looking house / apartment, seems to me that you’re doing pretty good for yourself. Gz master
Have you done a video on svelte? Would love to hear your thoughts. It also has SSR with sapper.
I haven't, I've done a little bit of the getting started tutorial and I enjoyed it, but I don't have a good reason to do more with it atm. I like the concept behind it, so I might learn it for fun
I love API Routes for Next.js where we can implement serverless functions easily.
I never used Gatsby but doesnt from next/image do the same thing ? It event loads them once they're in view, not all at once.
Help, i want to build an e-commerce website, which one is better Gatsby or Next.js?
(I think i will need both SSG and SSR)
I always use Next.js for SSR, but when it comes to static I just use CRA. Since SSG comes to Next.js I think I will stick to Next.js. I'm not a big fan of Gatsby :D
Btw Gatsby also has SSR. It's pretty fresh but now, I guess, it's so flexible as a next
Officially clarifying, it is possible to use Gatsby.js entirely without GraphQL. Would love to have Gatsby.js version without GraphQL support at all. Also it is pretty safe to use client side rendering with Gatsby.js
I agree with you that the only reason I’d use Gatsby currently is for its plugins. But given that is the only reason, how long will it take for next.js tools/utilities/plugins to be developed to become competitive with popular Gatsby plugins?
It's the same situation in the Vuejs ecosystem. Nuxtjs et gridsome. In the end I've chosen nuxtjs because it's was more flexible and less overkill.
gatsby-image plugin is god-tier, nothing comes close. For CMS multi-page marketing pages I would use Gatsby for anything big with complicated routes I would use Next.js
This is cool. Gatsby will absolutely prevail because, as you said, Next's handling of staticness is still primitive. Soon Gatsby will get incremental builds that makes building large sites much, much faster. Which I assume Next isn't doing yet, and probably won't be in years, if Gatsby's progress on incremental builds is of any guide.
The Gatsby incremental builds is actually out already in version 2.19.27 . Nice.
Andrew Hiljá in all seriousness, what is the longest you have heard of a Gatsby website taking to build?
3 years later, uhhhhh.
this didn't age well
If your doing any kind of image heavy site, Gatsby still rules! But like Ben said you do have to learn a little GraphQL 😎 Has anybody run Lighthouse Audits on the Next Static pages yet? Because that's another reason to use Gatsby. Killer SEO scores 🔥
I prefer Gatsby although I almost don't use Gatsby plugins. The reason is simple: it is easier for me to manage multilingual page with gatsby-plugin-intl plugin. This is the only plugin which I really need :) But NextJS is also really nice!
SSG does not support i18n build-in... at the time :(
Ben do a next js 12 video a lot of stuff changed so far (for the better)
Gatsby is bloated
how?
All the graphql stuff is unnecessary, plugins i tried have always conflicts, sometimes the dev server doesnt reload, build time is super long and other stuff
Also there is a super used mac safari extension called dark reader that doesnt load sites made with gatsby, only god knows why
Will then Next js app be deployable on something like Netlify if it's only static? What if some pages are ssr and some not?
Next.js SSG will be deployable, but of course routes that require SSR wouldn't be. To use Next.js SSG in a CI/CD pipeline you'd have it run `next export`.
Of course you can deploy a Next.js app that doesn't require SSR on Netlify, it works great. As long as you don't use getServerSideProps() or API routes, just build and export and voilà!
nextjs 100%
Hey, does Nuxtjs with Vuejs do that too ?
Thanks
Hi Ben, It would really be helpful if you made a video on how to deploy mern app on digital ocean with all the security stuffs that we need to know.
I don't see good tutorials online that includes everything.
Thank you
The Lone Traveller
Gatsby now has the early stages of SSR support, so the gap between them is closing. Gatsby ultimately has way better plugin and dev support, NextJs will have to get serious about SSG and push for plugin parity with Gatsby if they want to convince people to switch. I think Gatsby is still the only way I would do SSG, NextJs would be a frustrating experience trying to do even the basics.
I believe Next.js static site generation will never be good as Gatsby does this thing. For Next.js, it seems like a kind of a nice feature of the entire framework but for Gatsby, this is the whole idea behind the project. Anyway, it will be interesting to see how Next.js build their ecosystem around static sites. If they end up using GraphQL for querying things, it will be fun ;P
I was using Gatsy, but when i found Nextjs, never look back. just no need for Gatsby anymore
Quasar.dev is the best framework - look at it
I’ve been using it for about 4 months now and am loving it. Prefer it to Nuxt or React. It’s got all the best parts of React plus it’s own features. I’m glad to hear others are using it. I’ve not looked at next.js yet. Looks good.
To me Gatsby is overcomplicated to generate simple static websites.
Next.js has now now everything I need, and I think it covers most use cases anyway.
you don;'t look so pale now
Wow. Big news. Goodbye Gatsby, Goodbye Create-React-App
NextJS had static site generation already. I have been using it before Gatsby and Gatsby has a way better ecosystem in terms of plugins. Gatsby is like WordPress and NextJS is like Drupal.
All true. The graphql query schema is pretty simple and consistent though and the learning curve is about ten minutes. Toss in themes, save your image components etc...to use in other projects and you can create a pretty powerful site in a few hours. If you can use contentful and other services even easier. That said, I will be giving next another look.
One thing I just found out is that NextJS SSG doesn't seem to work with Cordova (or at least I couldn't make it work with it) while Gatsby seems to be working just fine.
I'm really interested in how to create Gatsby's most useful plugin functionality in Next.. this would be a great idea for a vid.
I've watched dozens of Next / Gatsby vids and none are really specific regarding actually explaining or showing static sites that Next has a problem with. Any examples?
Thanks for the awesome vid.. my thoughts are push forward with Next and try forge a workflow with workarounds to create Gatsby functionality, rather than the convoluted graphql + plugin workflow. I think next is the way forward.. appropriately named ;)
what about the 9.5 next.js update now SSG dynamic data
Gatsby feels "brittle" and the dev experience it quite bad. I've wasted countless hours trying to find a bug somewhere were, for example, my data were a number instead of a string (wrong type in my document store data blabla simple error... not the point) and Gatsby just outputs something totally irrelevant when the graphql schema creation fails. So this datastore is a real double-edged sword, once its there and running its a great/interesting concept but oh so brittle. As with Next, you have to implement those features yourself, create a data "store" somewhere, being a local API a remote API or what have you and handle the formatting/massaging of data there, like an image service that can create images based on queries and cache the results for you.
for a robust image manipulation/servicing solution, I can suggest imgix.com - they are great!
@@vasiovasio Yup, looks just like the service i meant with images for example.
It doesn’t really compare to gatsby, but to your point of next is becoming and all in one framework, I really like you can use their api structure to replace a separate node server. Sometimes it is nice to have everything together.
So this RFC is a Gatsby killer github.com/zeit/next.js/issues/9133 xD
Nextjs is getting plugins too! github.com/zeit/next.js/issues/9133
My very recent and actually first project in next js and it was very quick basically! I used express as server for CRUD, !!
Could you maybe do a video on fusion.js vs next.js or gatsby. Would be cool to see why fusion.js hasn't taken off yet even though the idea behind it sounds great.
What's wrong with Gatsby SSR? I haven't tried it but Gatsby is better for hybrid than Next.js for me. How would you replace Gatsby's graphql data with Next.js?
> What's wrong with Gatsby SSR?
As far as I'm aware there's not an easy SSR integration with Gatsby, I think you have to set up the server yourself
> How would you replace Gatsby's graphql data with Next.js?
I don't think there's a 1 to 1 replacement
Dude, I feel like you still struggle to differentiate the SSRendering and SSRouting
What's the difference?
@@hanseldsilva2393 on initial page load (when you first go to react url) the server will handle what to show to the user. after that the client (react-router librabry) can intercept the control over the router for its own purposes (rendering react content in our case). in this scheme there's nothing that prevents you to have a server that returns you some content on the first page load/when some other server makes a query to it, the one does not exclude the another. if it's complicated, you can see it on example, because before react mounts, the index.html can already have something in it
Never used nextjs but I love nuxt js and it’s always had both SSR and SSG
I am using Next.Js last 1 and half years.
Doesn't Gatsby also do static site generation and server side rendering? My problem with Gatsby are the plugins. Some critical ones aren't updated.
> static site generation
yes
> server side rendering
not on the same level as next.js
love the fact that theres no intro or outro
Noooooooooo..... not another framework......
Is it easier to learn compared to Gatsby
Gatsby has better support, plugins for SEO, Image optimisation/upbluring, PWA. I find Gatsby has better dev experience, less bugs, etc
I just started to use Gatsby and it has... a bunch of "quirks"
I'm afraid I'm using Sapper with the Svelte framework
Have been hesitant to use gatsby even for small projects, next keeps getting better and better with every release.
depends on your project, Gatsby is pretty rad
Full nextjs convert for sure
nextjs without a doubt
I usually use the command `next exports` to make the whole website static. Now with this update, is necessary to use it?
yeah
@@bawad can you send a more explicit answer please jaja?
Hi. It really good 👍 .
And one question ⁉️.
I will create new e-commerce web app. And
CRA or nextjs witch one is best?
nextjs
I was learning Gatsby, should I know focus on Next.js?
depends on what you want to build
Hi! Whats a good fullstack approach for NextJS?
They have API routes now
You can’t do animated page transitions in next.js because each page is rendered as it’s own app.
What do you think if nextjs have plugins like Gatsby does? Will u use Gatsby?
it's going to be a while until next.js has the level of plugins that Gatsby has, when that happens, I'll re-evaluate
I usually struggle to learn new things. What is the best resource you all have used to learn next.js?
next.js docs
@@bawad fersure thanks
So, 3 months later, Do you feel better or worse about NextJS?
probably still my default
Married with next.js from the beginnings. I like it so much, i don't even care about Gatsby, and its plugins.
isn't SSR easy by itself? you basically just call "renderToString" from ReactDom.. Implementing react-router support, extracting meta (via react-helmet) or redux support isn't that hard either.
@@gecko499 I am not being sarcastic. There are medium articles which you can follow and implement everything about (with even prefetching data) within 1-2h on an express js server.
@@gecko499 I have. It gives so many advantages, for example avoiding api calls to prefetch data (at least to your own server, since you can get the data directly from the db), implementing own caching solution and the ability to translate routes. I don't even know if next.js can do this (translate routes to support multilanguage setup). I am guessing it can, but it certainly won't be as flexible as your own solution...
@@gecko499 Fair point. Configuring Webpack was probably the biggest time sink of all in my setup. I did research next.js before doing my own solution, but for some reason decided to skip it...
From my experience implementing SSR (before Next.js and Gatsby were a thing) for React. I learned a lot from it, but I would definitely choose a framework in a flinch. There's so much maintenance required and you'll need to make sure that it can sustain the growth of your site. The more resources you add, the more you have to build and maintain.
While it served us well for the time (again, before any frameworks), the main issue was that no-one knew how to update it, as most of the people on the team had little knowledge to React with SSR.
@@dealloc Well, in my case it was somewhat complex to setup, but adding additional resources is just another item in the routes array with a specified route and a path to the component or a dynamic import if you want to lazy load the page... I do not generate static files though (like Gatsby). I would assume this would be complex and way too much trouble instead of using the framework.
How would I use styled-components with this?
I think you just use them normally
Ben Awad I had doubts cause you need some setup when you use them with next.js for ssr but I guess for static sites you dont need that?
I haven't tried it, but that's my guess
What's your skin routine, Ben?
I just have a neutrogena cleanser + olay moisturizer that I apply ~daily
Do next tutorial
I haven't used either yet, but I am wondering which one to pickup first.
just depends on what you want to build
I would say start with gatsby.
If I want to learn react, (I have solid Vue foundation), should I learn with CRA/Next?
Start with CRA
@@bawad thanks, Ben
Am i the first one?
you transformed saffron to gatsby?moved or whatever not native english
you can customize placeholder image if you think default blur is ugly.i usually add more blur with css filter. blur wont be animated just opacity(no performance cost).
not all of it, just the public pages th-cam.com/video/5rUNlYs6wu4/w-d-xo.html
Hmmm. return needGatsbyPlugin ? return Gasby : return NextJS. ... just Sayin. if/else is just so yesterday :)
Gatsbys niche is definitely its plugins. With like, 3 plugins you can make full blown authenticated cms with user friendly admin panel and everything in like 3 minutes.
You look unwell. Hope you are ok. Love your videos.
dude, get some vitamins..