{"id":3084,"date":"2021-09-01T09:29:59","date_gmt":"2021-09-01T09:29:59","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3084"},"modified":"2023-02-28T00:50:41","modified_gmt":"2023-02-28T00:50:41","slug":"js-tutorial-netlify-next-js","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-netlify-next-js\/","title":{"rendered":"JS Tutorial – Netlify & Next.js"},"content":{"rendered":"

Rengga Dev<\/strong><\/a> <\/span>– Cassidy Williams has been doing a Blogvent (blogging every day for a month) over\u00a0on the Netlify Blog<\/a>. A lot of the blog posts are about\u00a0Next.js<\/a>. There is a lot to like about Next.js. I just pulled one of Cassidy\u2019s\u00a0starters<\/a>\u00a0for fun. It\u2019s very nice that it has\u00a0React Fast-Refresh built-in<\/a>. I like how on any given \u201cPage\u201d you can import and use a\u00a0<Head><\/code>\u00a0to control stuff that would be in a\u00a0<head><\/code>. This was my first tiny little play with Next so, excuse my basicness.<\/p>\n

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

export async function getServerSideProps() {\r\n  \/\/ Fetch data from external API\r\n  const res = await fetch(`https:\/\/...\/data`)\r\n  const data = await res.json()\r\n\r\n  \/\/ Pass data to the page via props\r\n  return { props: { data } }\r\n}<\/pre>\n
The assumption is that you\u2019re 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\u00a0put this<\/a>\u00a0in your\u00a0netlify.toml<\/code>\u00a0file:<\/p>\n
[[plugins]]\r\n  package = \"@netlify\/plugin-nextjs\"<\/pre>\n
Now you\u2019ve got static where you need it, server-rendered where you need it, but you aren\u2019t 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
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\u00a0\/cool<\/code>\u00a0route (SSR) both return static HTML on load.<\/p>\n
\"I
I even had to prettify this source, as you HTML minification out of the box<\/figcaption><\/figure>\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\u2019s great it runs on Netlify so easily.<\/p>\n","protected":false},"excerpt":{"rendered":"
Rengga Dev – Cassidy Williams has been doing a Blogvent (blogging every <\/a><\/p>\n","protected":false},"author":1,"featured_media":3802,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[264,263,285,286,103,227],"newstopic":[],"class_list":{"0":"post-3084","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-javascript-tutorial","9":"tag-js-tutorial","10":"tag-netlify","11":"tag-next-js","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3084"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3084\/revisions"}],"predecessor-version":[{"id":3087,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3084\/revisions\/3087"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3802"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3084"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}