{"id":330998,"date":"2020-12-14T14:23:55","date_gmt":"2020-12-14T22:23:55","guid":{"rendered":"https:\/\/css-tricks.com\/?p=330998"},"modified":"2020-12-14T14:23:58","modified_gmt":"2020-12-14T22:23:58","slug":"netlify-next-js","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/netlify-next-js\/","title":{"rendered":"Netlify & Next.js"},"content":{"rendered":"\n

Cassidy Williams has been doing a Blogvent (blogging every day for a month) over on the Netlify Blog<\/a>. A lot of the blog posts are about Next.js<\/a>. There is a lot to like about Next.js. I just pulled one of Cassidy’s starters<\/a> for fun. It’s very nice that it has React Fast-Refresh built-in<\/a>. I like how on any given “Page” you can import and use a <Head><\/code> to control stuff that would be in a <head><\/code>. This was my first tiny little play with Next so, excuse my basicness. <\/p>\n\n\n\n

But the most compelling thing about Next.js, to me, is how easily it supports the entire rendering spectrum<\/a>. It encourages you to do static-file rendering<\/strong> by default (smart), then if you need to do server-side rendering<\/strong> (SSR), you just update any given Page component to have this:<\/p>\n\n\n\n\n\n\n\n

export async function getServerSideProps() {\n  \/\/ Fetch data from external API\n  const res = await fetch(`https:\/\/...\/data`)\n  const data = await res.json()\n\n  \/\/ Pass data to the page via props\n  return { props: { data } }\n}<\/code><\/pre>\n\n\n\n
The assumption is that you’re doing SSR because you need to hit a server for data in order to render the page, but would prefer to do that server-side so that the page can render quickly and without JavaScript if needed (great for SEO). That assumes a Node server is sitting there ready to do that work. On Netlify, that means a function (Node Lambda), but you barely even have to think about it, because you just put this<\/a> in your netlify.toml<\/code> file:<\/p>\n\n\n\n
[[plugins]]\n  package = \"@netlify\/plugin-nextjs\"<\/code><\/pre>\n\n\n\n
Now you’ve got static where you need it, server-rendered where you need it, but you aren’t giving up on client-side rendering either, which is nice and fast after the site is all booted up. I think it shoots some JSON around or something, framework magic.<\/p>\n\n\n\n
I set up a quick SSR route off my homepage to have a play, and I can clearly see that both my homepage (static) and \/cool<\/code> route (SSR) both return static HTML on load. <\/p>\n\n\n\n
\"\"
I even had to prettify this source, as you HTML minification out of the box<\/figcaption><\/figure>\n\n\n\n
I admit I like working in React, and Next.js is a darn nice framework to do it with because of the balance of simplicity and power. It’s great it runs on Netlify so easily.<\/p>\n","protected":false},"excerpt":{"rendered":"
Cassidy Williams has been doing a Blogvent (blogging every day for a month) over on the Netlify Blog. A lot of the blog posts are about Next.js. There is a lot to like about Next.js. I just pulled one of Cassidy’s starters for fun. It’s very nice that it has React Fast-Refresh built-in. I like […]<\/p>\n","protected":false},"author":3,"featured_media":331005,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/nextplugin.png?fit=1856%2C1074&ssl=1","jetpack-related-posts":[{"id":335526,"url":"https:\/\/css-tricks.com\/next-js-on-netlify\/","url_meta":{"origin":330998,"position":0},"title":"Next.js on Netlify","date":"February 28, 2021","format":false,"excerpt":"If you want to put Next.js on Netlify, here's a 5 minute tutorial\u00b9. One of the many strengths of Next.js is that it can do server-side rendering (SSR) with a Node server behind it. But Netlify does static hosting not Node hosting, right? Well Netlify has functions, and those functions\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350253,"url":"https:\/\/css-tricks.com\/architecting-with-next-js\/","url_meta":{"origin":330998,"position":1},"title":"Architecting With Next.js","date":"August 24, 2021","format":false,"excerpt":"Free event hosted by Netlify coming up next week (Wednesday, August 25th): Architecting with Next.js. It's just a little half-day thing. No brainer. Join us for a special event where we'll highlight business teams using Next.js in production, including architecture deep dives, best practices and challenges. Next.js is the fastest-growing\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/OG-Image-No-details-No-CTA.png?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":271705,"url":"https:\/\/css-tricks.com\/build-a-realtime-polling-web-app-with-next-js\/","url_meta":{"origin":330998,"position":2},"title":"\u200bBuild a realtime polling web app with Next.js","date":"May 29, 2018","format":false,"excerpt":"Learn to build a webapp that accepts user votes, using Next.js and Chart.js. Users can vote for their favorite pet, and the results are displayed in realtime on a graph in their browser using Pusher Channels.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/nextjs-poll-demo__1_.gif?fit=829%2C546&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353066,"url":"https:\/\/css-tricks.com\/building-a-tennis-trivia-app-with-next-js-and-netlify\/","url_meta":{"origin":330998,"position":3},"title":"Building a Tennis Trivia App With Next.js and Netlify","date":"October 8, 2021","format":false,"excerpt":"Today we will be learning how to build a tennis trivia app using Next.js and Netlify. This technology stack has become my go-to on many projects. It allows for rapid development and easy deployment. Without further ado let\u2019s jump in! What we're using Next.jsNetlifyTypeScriptTailwind CSS Why Next.js and Netlify You\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/tennis-trivia.png?fit=1200%2C632&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353128,"url":"https:\/\/css-tricks.com\/how-to-create-a-contact-form-with-next-js-and-netlify\/","url_meta":{"origin":330998,"position":4},"title":"How to Create a Contact Form With Next.js and Netlify","date":"October 21, 2021","format":false,"excerpt":"We're going to create a contact form with Next.js and Netlify that displays a confirmation screen and features enhanced spam detection. Next.js is a powerful React framework for developing performant React applications that scale. By integrating a Next.js site with Netlify\u2019s technology, we can quickly get a working contact form\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-09-19-at-3.36.18-PM.png?fit=1200%2C657&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363079,"url":"https:\/\/css-tricks.com\/nextjs-chrome-extension-starter\/","url_meta":{"origin":330998,"position":5},"title":"Helpful Tips for Starting a Next.js Chrome Extension","date":"February 10, 2022","format":false,"excerpt":"I recently rewrote one of my projects \u2014 Minimal Theme for Twitter \u2014 as a Next.js Chrome extension because I wanted to use React for the pop-up. Using React would allow me to clearly separate my extension\u2019s pop-up component and its application logic from its content scripts, which are the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_EC3F93C336EF3FAA64B8384642A6F175FADA3A235447EC3A34E69E391074F1AA_1642397608126_CleanShot2022-01-17at00.32.342x.png?fit=1200%2C796&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/330998"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=330998"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/330998\/revisions"}],"predecessor-version":[{"id":331006,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/330998\/revisions\/331006"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/331005"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=330998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=330998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=330998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}