Next.js from the Ground Up with Cassidy Williams

Next.js Server-Side Rendering with next-on-netlify

In this stage, we'll talk about how fallback works in Next.js with dynamic routes, and how to do server-side rendering with the next-on-netlify package.


[00:00:00] In the previous video, I talked about a little thing called fallback in Next.js when we're using the getStaticPaths function [00:00:10] in a dynamic route. Now, by default, you can use fallback as false, and that just means that whenever a route isn't defined, it will 404, [00:00:20] but what you can do is turn fallback to true. This completely changes the behavior of Next.js and what it does. When [00:00:30] fallback is true, the paths that are returned from getStaticPaths will be rendered to HTML at build time. The paths that have not been generated will not [00:00:40] result in a 404 page. Instead, something will happen at runtime for the users. Depending on the host that you use, depending on the method that you use, that can do [00:00:50] different things. On Netlify, however, that turns this entire page component into a server-rendered component. To do that, you can use Netlify functions [00:01:00] and the library, next-on-netlify. This library next-on-netlify is in the Netlify organization under next-on-netlify, and what you can do is you can [00:01:10] install this into your Next.js applications, and anything that involves server-side rendering, your Next.js routes, your applications, anything that you use with it will [00:01:20] be run via Netlify functions. That's what this whole library does. The installation is pretty quick and easy. We have it set up where it's truly just npm installing it, [00:01:30] setting the target to server list, adding a post-build hook, and then configuring the netlify.toml just a little bit differently. By switching to fallback [00:01:40] is true, this does not work on the next export version of your Next.js applications, so you can't do a truly statically generated [00:01:50] application with that. You can definitely have statically generated parts for your applications, but this component specifically will not be statically rendered. If you'd [00:02:00] like to see an example of this, I actually have a project that I built that was a pranking application. Now, in this app, I have a page where it's news and then article.js. [00:02:10] My getStaticPaths, I don't actually have any preset paths, so my paths' variable is just an empty array instead of a populated one like in our other application, [00:02:20] and then fallback is true. Then, for the rest of these, in the parameter, I get the article that I pulled from the URL, and that's actually a title and it's a [00:02:30] fake news article. If we were to look at this in the browser, the way the application works is I can say, 'Explorers Save the [00:02:40] World'. Then, when I go to that route, it's a little prank where I'm not going to play a RickRoll video, but it's an article that says, 'Explorers Save the [00:02:50] World, Not'. Then, I actually hacked together the Next.js head API to make it look like a real article when it's shared on social media [00:03:00] when it really is not. It's a fun little prank thing that shows the usage of these kinds of dynamic routes where no paths are predefined [00:03:10] at all, but we still want to use whatever paths could be after this whole news part in the path of the URL. If you'd like to see how I installed next-on-netlify, [00:03:20] instead of having next export, I have this post-build that calls next-on-netlify after I installed it. In the netlify.toml, I literally copied and [00:03:30] pasted from the readme right here, and then in next-config, I have this target server list. If in your applications, if you were to do something in this Pokemon [00:03:40] application or in any of your other applications, if you want to server render routes or if you want to use anything that isn't necessarily supported by statically exporting [00:03:50] your application, you can use the next-on-netlify library to take care of that for you. [00:03:58]


your progress