Why Next.js is an effective framework to build a website? ft Tim Neutkens | Prismic

- So I'm here at Prismic Studio and I'm here with Tim, lead developer at Next. - Yep. Tim how long have you been working on Next? - Pretty much since it came out. But I was mostly an external contributor until recently, like one and a half years ago. So Next was started like two years ago, sort of,

or two and a half, I'm not entirely sure from the top of my mind, but end of 2016. - Right. - And I've been involved with the project for a very long time. - So the reason I thought of inviting you here is that for a lot of our users, basically, through the specificities of what we provide, like we don't provide the front end as a CMS we only provide the back end. - Right. - And a lot of users, then they ask which framework should we be using, right?

- And I really think Next is a very viable solution for a lot of their cases, and I thought like why not have you here to tell us about why is it viable for this kind of cases where basically they build websites with content and then the website evolves in different directions. Can you tell us why Next is a good solution for these kinds of cases? - So generally when you start building a web

application, for example, you start out with maybe static pages, right? So you build your marketing pages like your Homepage, and your About page and your Terms of service, that kind of thing. And generally once your application starts growing, you want to do something more dynamic. For example, you want to do Product pages that have data from your CMS coming in.

Maybe like the livestock updates, that kind of thing. And Next.js allows you to actually switch between those. So between static rendering and server side rendering on per page basis. So every route of your application, so your Homepage could be a static website and then your Product pages could be dynamic for example. - So wait, do I need routes to start working with Next? - So the way that it works is

you create a pages directory, which it works in a similar way to PHP for example. So if you've ever used PHP: you create a folder and you put in your PHP files and it just works, right? - Right. - So with Next, we provide a similar solution but for React. Which means you create a pages directory, and you put in the file which is, for example, your about.js, which maps to /about automatically. - So once I did this, I have my page running,

and then if I want to add some content that comes from, not statically, but from another source. - Right. - A CMS or a database, how would I do that? - So what you'd do is you'd create a React component, just a normal React component as you'd generally do it. So, then you'd add in a method called getInitialProps, which is a static method on pages that is asynchronously executed

and weighted before rendering. - So before rendering the method will be called - Yeah, before rendering you fetch some data from anywhere, which could be an API for example or a Headless CMS. And after that it starts rendering. So, after that we render the actual components and the content of the page. - So basically, the way I understand it, you have a page directory, you make your file for that page, and then if you want to fetch data from somewhere else--