Adventures in Headless with Next.js and Sanity

In this talk Knut will take us through a project built with the SSR React framework Next.js with Sanity as a backend.

We'll take closer look at patterns and lessons learned building a production website.

Presenter: Knut Melvær
===================================================== Follow us and join our Slack community:
- ReactJS Norway's site: http://bit.ly/2ka4hC8
- Facebook: http://bit.ly/2kxmHxW
- Instagram: http://bit.ly/2kpysnJ
- Twitter: http://bit.ly/2kaehvl
- Youtube: http://bit.ly/2kANuJl
- Slack Community: https://goo.gl/YwUUKJ

Sponsored by Stooic Labs (http://bit.ly/2oTE4dF)

Organizer: Domenico Solazzo (http://bit.ly/2jRxj8j)

Transcript

1. HI, I'M KNUT (AKA DATAKNUT) React Meetup, Oslo, 26.02.2018
2. const me = { name: "Knut", nickname: "dataknut", twitter: "@kmelve", email: "knut.melvaer@netlife.com" } React Meetup, Oslo, 26.02.2018
3. ADVENTURES IN HEADLESS WITH NEXT.JS AND SANITY React Meetup, Oslo, 26.02.2018
4. WHAT IS NEXT.JS? React Meetup, Oslo, 26.02.2018
5. WHAT IS NEXT.JS? > Next.js is “a minimalistic framework for server- rendered React applications” > It takes away (most of) the pain with server rendering and routing for websites built in React github.com/zeit/next.js/ React Meetup, Oslo, 26.02.2018
6. WHAT IS SANITY? React Meetup, Oslo, 26.02.2018
7. WHAT IS SANITY? Sanity pretends to be a Headless Content Management System, but it's really a Data Management System on crack cocain (i.e. you have to try it to understand its appeal). sanity.io / docs.sanity.io React Meetup, Oslo, 26.02.2018
8. SOME LESSONS React Meetup, Oslo, 26.02.2018
9. LESSION 1 NEXT.JS RENDERS THE FIRST REQUEST ON THE SERVER, AND THEN JUMPS INTO SPA MODE React Meetup, Oslo, 26.02.2018
10. NEXT.JS RENDERS THE FIRST REQUEST ON THE SERVER, AND THEN JUMPS INTO SPA MODE > Check your API’s CORS-settings! > You probably need to remember to restart your server when your doing changes to the routing > You need to keep an eye on prefetching in order to prevent the site for pulling too much data React Meetup, Oslo, 26.02.2018
11. LESSION 2 YOU CAN HAVE HIEARCHY EVEN THOUGH SANITY IS PRETTY “FLAT” React Meetup, Oslo, 26.02.2018
12. YOU CAN HAZ HIEARCHY! > If it makes sense, you can use the _type as a top-level slug. const url = `/${_type}/${slug.current}` It's pretty clever. React Meetup, Oslo, 26.02.2018
13. LESSION 3 BEWARE OF PREFETCHING! ! React Meetup, Oslo, 26.02.2018
14. LESSION 4 GET ONLY WHAT YOU NEED ! React Meetup, Oslo, 26.02.2018
15. LESSION 5 WORK CLOSELY WITH WEB EDITORS React Meetup, Oslo, 26.02.2018
16. LESSION 6 YEAH SURE, IT'S HEADLESS AND “INTERFACE AGNOSTIC” :party_parrot: …but you probably want to tie some of the types to it's view context React Meetup, Oslo, 26.02.2018