Kapehe: How to add a built-in authoring experience to Next.js

Have you ever thought about how success can be a pain? Of course, most of us are hoping that the thing we're working on gets more customers, makes a higher impact, a reason to hire more people, get more jobs, add more better features, solve more and better problems and so on. But as developers, designers, content people and managers, it also involves more complexity and coordination.

Not only do you need your website to scale with an increasing audience from potentially all over the world, but you also need to and make sure that your project can scale. You have that growing team and you wanna add more features, so you wanna make sure. (upbeat music) Aloha everyone. My name is Kapehe. I'm a Senior Developer Relations Specialist @ Sanity.io. We're a platform for structured content who are working to make it easy to build products with content that scale.

And today, we're going to talk about how you can build for success without a lot of upfront costs, So you can spend your time on the stuff that matters and is specific to your project. Let's say you're tasked with a knowledge base to help your customers or even internal teams to figure out what they need to do without having to contact support. That's huge. Maybe you're working in a startup that is starting to get a lot of customers or you're a developer in a large organization who wants to document a design system together with the designers and editors.

So, fortunately, with tools like Next.js and Vercel, your website is ready for scaling from the get-go without losing performance, thanks to CDNs and the edge network. And Next.js lets you build with components and templates in a structured way and abstract when you need to. So for example, with Next.js's new layout routes, you can go from simple page-based routing to more advanced routing that lets you go more granular and do server-side data fetching

in components, ideal for authenticated routes, building out customer-facing dashboards and so on. So, being able to start simple and add more complexity as you need is a principle called progressive enhancement. Sometimes you will also hear progressive enhancement used specifically about how you load JavaScript in the browser, but we're gonna use it more broadly in this talk today. So great developer experiences are often built on the principle of progressive enhancement, but progressive enhancement isn't just important

for developers, it's important for your project and your team as a whole too. So for web design, it often means that you start with the content first and then you evolve your visual design around it. If you think about it, it's especially true for knowledge base if the content that your audience will interact the most with is a focus. So as a designer, it's super useful to know what the design is supposed to accommodate upfront instead of figuring out later that your assumptions didn't hold up

when the real content comes into your design. So, and likewise, as a developer, it's super useful to have a real content when you're building your templates and your components. So, this takes us to how we get this content to happen. So as developers, our go-to for adding some content to our website is often by hard coding it right into the HTML or adding it via Markdown files. This can make a lot of sense if it's just you, if you're making this for yourself and the fact

that your content is right next to your code is super great because you don't have to context switch and you can use tooling in your code editor for your content too. Awesome. However, if you plan to have someone else who isn't a developer working on that content, then this approach stops being simple and starts to be hard. You probably need to teach your team about Markdown and Git now and suddenly you need to push content updates into your Git history alongside the new website features you are building, huh.