Netlify & Next.js

Cassidy Williams recently conducted a month-long daily blogging campaign on Netlify blogs. Many blog posts are about Next.js. Next.js has a lot to be praised. I tried a Cassidy's introductory project out of interest. It has React Fast-Refresh built in, which is great. I getServerSideProps that it can be getStaticProps and used on any "page" to control what was originally in the .js file. This is my first time trying Next.js, so please forgive me for the basics. But what's most striking about Next.js for me is that it easily supports a full rendering process. It encourages you to do static file rendering by default (smart), and then if you need to do server-side rendering (SSR), you just need to update any given page component to include the following:

export async function getServerSideProps() {
  // Get data from external API const res = await fetch(`https://.../data`);
  const data = await res.json();

  // Pass data to the page via props return { props: { data } };
}

Suppose you do SSR because you need to access the server to get data in order to render the page, but prefer to render on the server side so that the page can render quickly and without JavaScript when needed (which is very good for SEO). This assumes that there is a Node server ready to perform this work at any time. On Netlify, this means a function (Node Lambda), but you hardly have to think about it, because you just need to add the following in your netlify.toml file:

[[plugins]]
 package = "@netlify/plugin-nextjs"

Now you can do static rendering where you need it, server-side rendering where you need it, but you also haven't given up on client rendering, which is very fast after the website is launched. I think it does some JSON transfer or other framework level magic inside.

I've set up a fast SSR route from my homepage for testing and I clearly see that both my homepage (static) and /cool route (SSR) return static HTML when loading.

I admit I like to use React, and Next.js is a very nice framework because it has both simplicity and great functionality. It's easy to run on Netlify, which is great.

The above is the detailed content of Netlify & Next.js. For more information, please follow other related articles on the PHP Chinese website!