[LS] Next.js 101
Before jumping into the actual content, this post (and the upcoming ones) is one of the cheat sheets I keep in my Notion account. Since these notes were intended for personal use, the writing style is such that it is easy for me to understand. I want to share them online in case someone finds them useful.
Let's say you wanted a super quick intro to what Next.js is and what it offers..
What is it
Next.js is a React framework that makes your development more opinionated and gives you features such as hybrid static & server-side rendering, TypeScript support, smart bundling, route pre-fetching, and more. Key features are the built-in Server-side Rendering, the File-based Routing and the Fullstack capabilities you can use. Find out more in the official documentation.
Rendering options
A useful link explaining rendering on the web.
Static Site Generation (SSG)
With SSG you get a pre-generated page with the data being prepared on the server-side during the build time. Because of that you can cache the pages in the server / CDN and the incoming requests can be served instantly. In order to use SSG you need to export a function called getStaticProps. In this function you can run any code that would normally run on a server (e.g. connect to a db or access the filesystem) because any code you write here will never end up and execute on the client side as this code executes on the build process.
When to use it:
The page rarely changes
The page shows the same content for all users (e.g. a portfolio website, a public documentation page, a blog etc)
You are willing to redeploy when you make a change to the content
Server-side Rendering (SSR)
SSR is all about preparing the content of a page on the server instead of the client. The HTML page is generated on each request which naturally results in slower performance than Static Site Generation (SSG). In order to use SSG you need to export a function called getServerSideProps.
When to use it:
SEO is important for your page
Each user gets different content
Incremental Static Generation (ISG)
ISG is similar to SSG but you don't statically generate a page only once at build time but you can continuously update it after X number of seconds without you needing to redeploy the changes. You can enable it by using the revalidate prop in the getStaticProps function.
When to use it:
The page changes frequently
There are too many static pages to statically generate them all up front (e.g. a huge Ecommerce website)
Client-side Rendering (CSR)
CSR is about rendering the content of a page in the browser. Instead of getting all the content from the HTML document itself, a empty HTML document is initially served to the browser and then the painting follows.
When to use it:
You want to lazy load a portion of the page
A portion of the page shows different content for each user
Fullstack capabilities
With Next.js you can:
Create your own backend API in your Next.js project using node.js.
Use it as a transformation layer to retrieve data from an external source, transform them the way you want and send them back to your frontend app.
Add authentication in your app.
File-based Routing
No need for an "in-code" routing solution (using something like the amazing React Router). With Next.js you can define pages and routes with files/folders under the pages folder which makes things more understandable and easy to maintain (personal opinion). Read more here.
API Routes
With API routes you can build your own (REST) API. Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint which returns a response instead of returning a page (HTML document). They are server-side only bundles and won't increase your client-side bundle size. Read more here.
Miscellaneous
_app.js
Next.js uses the App component to initialize pages. You can override it and control the page initialization (e.g. by using a Layout component to wrap the whole app). More info here.
_document.js
A custom Document can update the <html> and <body> tags used to render a Page. This file is only rendered on the server, so event handlers like onClick cannot be used in _document. More info here.
getInitialProps
getInitialProps enables server-side rendering in a page and allows you to do initial data population, meaning it sends the page with the data already populated from the server. This is especially useful for SEO. Read more here.
P.S. Recommended: Use getStaticProps or getServerSideProps instead of getInitialProps. These data fetching methods allow you to have a granular choice between static generation and server-side rendering.