Kapehe: How to add a built-in authoring experience to Next.js
Kapehe: How to add a built-in authoring experience to Next.js
Building for success can be costly, but with tools like Next.js, Vercel, and Sanity.io, you can build and scale confidently, with Kapehe, Senior Developer Relations Specialist at Sanity.io.
Build with Vercel: https://vercel.com
Content
0.719 -> foreign
5.21 -> [Music]
9.179 -> have you ever thought about how success
10.92 -> can be a pain of course most of us are
13.559 -> hoping that the thing we're working on
14.82 -> gets more customers makes a higher
17.16 -> impact a reason to hire more people get
19.619 -> more jobs add more better features solve
22.56 -> more and better problems and so on but
25.08 -> as developers designers content people
27.42 -> and managers it also involves more
29.82 -> complexity and coordination not only do
32.399 -> you need your website to scale with an
34.2 -> increasing audience from potentially all
36 -> over the world but you also need to and
38.52 -> make sure that your project can scale
41.219 -> you have that growing team and you want
42.96 -> to add more features so you want to make
44.219 -> sure
48.78 -> Aloha everyone my name is kapehe I'm a
51.48 -> senior developer Relations Specialist at
53.28 -> sanity.io we're a platform for
55.739 -> structured content who are working to
57.539 -> make it easy to build products with
59.64 -> content that scale and today we're going
61.92 -> to talk about how you can build for
63.78 -> Success without a lot of upfront costs
65.939 -> so you can spend your time on the stuff
67.439 -> that matters and is specific to your
69.24 -> project let's say you're tasked with a
72.36 -> knowledge base to help your customers or
74.58 -> even internal teams to figure out what
76.74 -> they need to do without having to
78.72 -> contact support that's huge maybe you're
81.54 -> working in a startup that is starting to
83.4 -> get a lot of customers or you're a
85.38 -> developer in a large organization who
87.18 -> wants to document a design system
89.1 -> together with the designers and editors
91.68 -> so fortunately with tools like nexjs and
95.04 -> Versa your website is ready for scaling
98.04 -> from the get-go without losing
99.9 -> performance
101.1 -> thanks to cdns and the edge Network and
104.22 -> next.js lets you build with components
106.259 -> and templates in a structured way an
108.6 -> abstract when you need to so for example
111.36 -> with next.js's new layout routes you can
113.7 -> go from simple page-based routing to
116.46 -> more advanced routing that lets you go
118.2 -> more granular and do server-side data
120.36 -> fetching in components ideal for
123 -> authenticative routes building out
124.799 -> customer facing dashboards and so on
127.38 -> so being able to start simple
130.08 -> and add more complexity as you need is a
132.9 -> principle called Progressive enhancement
134.84 -> sometimes you will also hear Progressive
137.16 -> enhancement use specifically about how
139.319 -> you load JavaScript in the browser but
141.72 -> we're going to use it more broadly in
143.28 -> this talk today
144.78 -> so great developer experience is often
147.239 -> built on the principle of progressive
149.04 -> enhancement but Progressive enhancement
151.379 -> isn't just important for developers it's
153.72 -> important for your project and your team
155.58 -> as a whole too so for web design it
158.459 -> often means that you start with the
160.08 -> content first and then you evolve your
162.84 -> visual design around it if you think
165.239 -> about it it's especially true for
166.92 -> knowledge base if the content that your
169.739 -> audience will interact the most with is
171.78 -> the focus so as a designer it's super
174.48 -> useful to know what the design is
175.98 -> supposed to accommodate up front instead
178.8 -> of figuring out later that your
180.36 -> assumptions didn't hold up when the real
182.28 -> content comes into your design
184.319 -> so and likewise as a developer it's
186.9 -> super useful to have real content when
189.12 -> you're building your templates and your
190.44 -> components so this takes us to how we
193.26 -> get this content to happen
195.239 -> so as developers our go-to for adding
198.06 -> some content to our website is often by
200.4 -> hard coding it right into the HTML or
203.159 -> adding it via markdown files this can
205.62 -> make a lot of sense if it if it's just
207.72 -> you if you're making this for yourself
209.34 -> and the fact that your content is right
211.62 -> next to your code is super great because
214.2 -> you don't have to context switch and you
215.94 -> can use Tooling in your code editor for
218.099 -> your content too awesome however if you
221.459 -> plan to have someone else who isn't a
223.26 -> developer working on that content then
225.18 -> this approach stops being simple and
227.519 -> starts to be hard you're Pro you
230.22 -> probably need to teach your team about
231.54 -> markdown and get now and suddenly you
233.94 -> need to push content updates into your
235.98 -> git history alongside the new website
238.319 -> features you are building and so you
241.319 -> probably need something like a CMS so
244.379 -> most cms's either require you to install
247.2 -> a whole separate app though with its own
249.599 -> database and deployment config to have a
251.76 -> local and production environment
253.98 -> or else you have to log into a bespoke
255.9 -> dashboard where you have to context
257.699 -> switch between your code and their UI
259.919 -> for form building and you can't be
261.6 -> confident that you can customize it to
263.699 -> what you need down the road when those
265.32 -> needs arise and they will and you also
268.139 -> want to make sure you're structuring the
269.58 -> content in a way that makes it easy to
271.38 -> design for and code with and you don't
273.6 -> want anyone to suddenly change the name
275.639 -> of a field on accident and break the
278.04 -> whole app so at a sanity we're working
281.22 -> with the next iteration of the sanity
283.199 -> Studio we want to make it really simple
286.08 -> to add content editing experiences to
288.96 -> your apps so without having to context
291.18 -> switch building up what is going to be
293.04 -> the app's data structure while giving
294.9 -> your team an intuitive and non-bloated
297.12 -> user-friendly editing environment that
299.759 -> still fully customizable
301.8 -> so the next version of Sanity studio is
304.199 -> in many ways a framework for creating
306.72 -> editing experiences and you can add it
309.12 -> to next.js with a single dependency next
311.52 -> Dash sanity it's just a react dependency
314.46 -> that you can mount anywhere in your next
316.32 -> JS app that is you can actually Mount
318.78 -> the studio in any app and build it with
322.02 -> any modern bundler
323.94 -> so I'm going to show you a demo and I'm
326.52 -> going to start simple so that you can
328.44 -> scale from this we're going to be
330.24 -> starting from the beginning like really
332.34 -> really beginning like Run next create
335.22 -> next app type beginning and if you can
338.88 -> believe it in less than 10 minutes we'll
340.86 -> have a full sanity Studio embedded in
343.68 -> our next JS app I'll quickly show you
345.66 -> how to display your content on the front
347.82 -> end and have under one URL your next JS
351.66 -> app and your content editing platform
353.52 -> the sanity studio so let's get right to
356.1 -> it okay so like I said we're starting at
358.979 -> the beginning beginning we're creating a
361.259 -> next app with using npx Create next app
363.6 -> we're going to name it next JS conf
365.639 -> sanity
366.78 -> we're going to hit enter let that
369.18 -> do its thing and then we're going to
370.68 -> open it up in vs code
374.88 -> all right looks like it's done let's
376.62 -> open that up
378.6 -> now the first thing we want to do is
380.039 -> install the dependencies that we need so
382.259 -> at the time of this recording you will
384.539 -> need next sanity and Sanity at Dev Dash
387.66 -> preview in the near future you'll just
390.36 -> need next Dash sanity but if you try it
392.1 -> today
392.819 -> uh do both of those
396.06 -> okay so we're gonna let that also do its
397.919 -> thing so what we're doing is we are
399.84 -> putting a sanity studio in a next JS app
403.62 -> so they'll both live the sanity studio
407.1 -> and the next app will live under the
408.96 -> same URL we are going to be creating an
412.08 -> admin path so you remember in WordPress
414.479 -> the slash WP Dash admin we're creating a
418.319 -> folder called slash admin so that's kind
420.66 -> of what
421.56 -> what you can compare it to
424.139 -> we're going to create this route for our
426.3 -> editor editor so that they can access
427.979 -> the studio quickly easily and they don't
431.22 -> have to go find a different URL all
433.199 -> right so that looks like it's done
436.38 -> okay so here's our project first things
438.66 -> first let's create a config file so
441.78 -> we're going to create a new folder and
443.099 -> new file within that
444.84 -> we're gonna do export const config and
447.419 -> within this we're just going to list a
449.28 -> couple things that we need so project ID
450.78 -> and data set is how our studio and our
453.24 -> next app connect this is where all of
455.699 -> the content is stored because it's
457.68 -> stored in the cloud so sanity is a
460.259 -> real-time platform the content is never
462 -> stored locally
463.44 -> so we can use different data sets we're
465.66 -> going to use production in this
467.699 -> if you want to have other ones you can
470.58 -> we're going to have our API version I'm
472.919 -> going to name the studio next JS conf
474.84 -> you can name that anything you want our
476.58 -> base path is admin now we can add a
479.759 -> bunch of plugins for this we are going
482.099 -> to add desktop or desk tool and you
484.68 -> could just continue chaining them on
486.24 -> like that but we're going to do desk
487.8 -> tool and that will be for our studio
490.44 -> now let's import this this desk tool
495.66 -> and cool now we're gonna leave the
497.52 -> project ID blank Well for now but let's
500.4 -> go grab that project ID
502.4 -> and
504.06 -> get our app up and running so I already
506.819 -> have in my manage dashboard this is
509.819 -> under my sanity account
511.8 -> um a project so you can do members you
513.959 -> can do data sets you can give access to
515.7 -> people be careful giving access and
518.7 -> allowing credentials
520.56 -> um to certain people you definitely want
522.839 -> to make sure that the people you want
524.339 -> getting into your studio to be the ones
526.44 -> that can edit course origin definitely
528.839 -> put in the URL for whatever your website
531.899 -> lives at and allow credentials I've put
533.94 -> in localhost 3000 we're just going to
535.8 -> stay at that today but once you deploy
538.86 -> definitely get that in there now you can
542.82 -> get your own project started at
544.019 -> sanity.io and get started I already did
546.959 -> that so I'm just going to copy this
548.58 -> project ID take it back to my project
551.839 -> and put it in
554.399 -> perfect
556.44 -> okay so the next thing we want to do is
559.08 -> the admin route so this is a wild card
561.72 -> route so since the studio is a single
564.6 -> page application we need all of its
566.399 -> routes to go to slash admin so that's
568.92 -> why we're going to do this bracket
570.54 -> bracket.index.js
573.72 -> so this wild card route is going to do
575.82 -> is going to what it's going to do is
577.019 -> redirect all of our URLs under admin to
579.66 -> that file which is the studio component
582.12 -> so it's very important that we do this
585.779 -> there's going to be a couple things in
587.16 -> here but this is really where our studio
588.839 -> lives so we're going to create a config
591.959 -> we're also going to export the page
595.08 -> component
598.44 -> so we'll set that up export default
601.08 -> function we'll call it Studio page
604.38 -> and then in here we're going to have our
607.26 -> next Studio
613.08 -> now we're going to leave this part blank
615.42 -> because we are going to create our
618.3 -> config but
619.56 -> let's import a couple things so let's
622.26 -> import the next Studio what we're using
625.56 -> down below
626.82 -> and we'll bring that from next sanity
628.32 -> which we've already installed
632.7 -> next we will import
635.16 -> create config
637.08 -> and we'll bring that from sanity
641.04 -> and then lastly let's import
644.31 -> [Music]
645.959 -> the config from that file that we just
649.8 -> made the sanity.config.js
652.44 -> so let's
654.12 -> put our path in perfect
660.36 -> so we are going to create the config now
663.18 -> so constudio config will be
666.779 -> our config and then we need to use it
669.06 -> down below
670.44 -> in that component
673.92 -> Studio config perfect
679.68 -> okay so right now we have the two files
682.079 -> that we need and this is it this is all
683.7 -> we need to have our sanity studio in our
686.459 -> next JS app and just like that it's done
690.48 -> but we're gonna we're gonna do more than
692.519 -> this
696.42 -> so
697.62 -> there are a couple things that we need
698.94 -> to do but first let's look at what it
700.56 -> looks like so npm run Dev to get it
702.72 -> running let's go to localhost 3000
708.72 -> scroll up a little bit to find that yep
711.42 -> localhost 3000
714.48 -> and then this is the standard next.js
717.24 -> landing page
720.66 -> let's go to slash admin and we should
723 -> see our sanity Studio
726.899 -> perfect so like we
729.48 -> like we have the name the next JS conf
731.519 -> that we did earlier but there's no
732.899 -> document types because we haven't
734.16 -> defined a schema yet
736.44 -> now it's important that
738.899 -> we understand these types that we're
741.3 -> about to work with so we have document
742.86 -> types and field types so we have no
744.899 -> document types and then within document
747.12 -> types we have our field types field
749.459 -> types
750.54 -> are the user-friendly UI for Content
753.36 -> editing
754.56 -> so
756.899 -> in here in the config we are going to
759.54 -> add in our schemas now you could make a
763.139 -> separate file but to just drive the
765.839 -> point home that this is only two files
767.519 -> that you need I'm going to put it right
769.32 -> in here so it's going to be
770.88 -> kind of a long list I'm going to have
772.579 -> four field types and one document type
775.62 -> but so you could list them here you
778.2 -> import them from whatever file you have
780.12 -> do article author post whatever it is
785.399 -> so I pasted that in so Define type and
788.639 -> Define field or optional helper
790.26 -> functions that can give you Auto
791.459 -> completion and validation when you're
793.079 -> using typescript so here's a couple
794.82 -> things that I want to point out so we
796.62 -> have name title and type name is going
799.68 -> to be
800.82 -> the internal name of the field type is
803.639 -> going to be the schema type and then
806.22 -> title is going to be the front facing
808.139 -> the studio facing
809.88 -> naming of this so
812.79 -> [Music]
814.079 -> every single field every single type
816.3 -> needs to have a name title and type so
819.66 -> it looks like there's an error oh we
823.74 -> need to import the Define field
827.76 -> and the Define type so let's import that
830.279 -> real quick
834.12 -> but yeah like I said name is going to be
835.86 -> the property of the Json document that
837.66 -> the studio writes to title is what ends
840 -> up in the studio and we'll see that in a
841.8 -> second and type is the field type that
844.079 -> decides which UI the editor see and now
847.38 -> we have our knowledge base articles and
849.959 -> this is our document type
851.639 -> so I'm going to click there it's going
853.139 -> to have nothing but
855.36 -> we can create content so if we click on
857.339 -> the little pencil thing
858.72 -> this is what we just created with that
861 -> schema so we have the internal title so
863.459 -> there are little descriptions so editors
866.639 -> can quickly know what what they're
868.32 -> looking at so for internal use to make
870 -> it easy to find and identify there's
871.86 -> article title there's the public facing
873.839 -> title and then there's article slug that
875.82 -> you can quickly generate
877.62 -> and this is what our
880.62 -> Studio looks like and
883.98 -> I want to kind of talk about this for a
885.72 -> second so we have our
888.48 -> two files that we just did and from
892.139 -> from the beginning from create next app
894.36 -> it took us less than nine minutes to get
897.12 -> a full sanity studio in a next app and
900.66 -> for the studio to be up and running
903.66 -> ready for someone to create content so
906.54 -> if we created content uh internal title
908.82 -> let's say the category is Hawaii but the
910.8 -> article title that we want is best
912.48 -> places to get Shave Ice
915.899 -> now if I wanted to I could commit all
918.42 -> this to get deploy it and very quickly
921.6 -> my editors have a URL that they can
924.06 -> start editing content
929.1 -> so you can put generate that article
931.26 -> select and publish so
934.68 -> you can hit publish and you can make it
936.54 -> available to the public API or it
939.36 -> automatically gets synced to the cloud
940.56 -> which is the content like in real time
942.54 -> so I'm just going to publish it here
945.42 -> now this also means that the changes in
947.639 -> the editing environment
949.32 -> are also in git so you have more control
951.48 -> over what you're doing which is
953.279 -> especially important if you plan to
954.6 -> change your schemas and have to do
956.04 -> migrations so you don't want anyone
958.079 -> accidentally changing schema types that
960 -> these apps rely on so we bring our
962.699 -> editors here they CR they edit the
964.86 -> content
966.24 -> but all the schema types all that is in
969.18 -> git and so none of that can be played
972 -> around with
974.22 -> but I really want to drive the point
975.48 -> home that it's two files very quickly in
979.019 -> less than nine minutes we got this all
981.18 -> up and running ready to collaborate with
983.399 -> our team
984.959 -> now I created two
987.54 -> two articles two knowledge-based
989.339 -> articles but now I'm going to throw in
991.92 -> some extra coding and extra files and
994.199 -> styling and I'm going to show you what
995.82 -> it looks like so I just did next stuff
998.279 -> so
1000.139 -> um
1001.16 -> I created buttons for the home which
1003.32 -> will take us back to localhost 3000 the
1005.48 -> super super secret sanity Studio
1008 -> so let me show you quickly what I've
1010.16 -> done
1011.48 -> now the index.js file under pages
1015.56 -> I have those two that those two buttons
1018.38 -> let's just collapse that for a second
1020.06 -> but
1021.56 -> we do have the get static props and I'm
1023.42 -> using grok here so grock is the query
1026.839 -> language that we use at sanity you can
1028.88 -> also use graphql so this grout query is
1031.88 -> going to get all of our articles so it's
1034.339 -> getting our articles and the Define Slug
1036.079 -> and pulling out the ID title and the
1038.72 -> slug and those are the things that we
1040.1 -> need so you can use grok or you can use
1043.04 -> graphql either one works with sanity
1046.52 -> um I highly recommend grock it's pretty
1048.559 -> great and then we are going to return
1050.679 -> props and that's our articles which we
1053.24 -> have up here
1055.88 -> and then just to show you again in here
1058.039 -> this is
1059.9 -> the two buttons and then linking or
1062.419 -> mapping over all of the article titles
1066.32 -> so that's why we have the two titles
1067.76 -> listed in the middle
1069.32 -> and that is the index page and made the
1073.039 -> get client so we are fetching for our
1075.26 -> data we also added sanity.server.js
1077.96 -> we're using it only for the code that
1079.64 -> runs on the surface to decrease the
1081.32 -> bundle size of the front end and in here
1083.419 -> we have that create client from nexanity
1087.02 -> we've pulled in the config from that
1089.059 -> config file that we made earlier
1091.64 -> and we're using it all here
1096.679 -> and here are two articles that we made
1099.5 -> earlier and we're just mapping over so
1101.12 -> if we added more that list would just
1102.799 -> get bigger and bigger
1105.71 -> [Music]
1107.419 -> so if I click into one I'm just
1109.46 -> displaying the title in the in the slug
1111.98 -> but we do see that the slug is in the
1114.799 -> URL so we have URL slash and then the
1118.16 -> slug that we created in the studio
1119.84 -> earlier
1121.58 -> now let me show you that slug file just
1123.98 -> real quick
1126.679 -> all right so in here
1129.62 -> so the slug
1131 -> it's in two brackets that means it'll
1132.919 -> just be replaced with whatever slug
1134.419 -> we're using so we're gonna
1136.82 -> tell next how many pages we have so
1138.679 -> let's get static paths and then we're
1140.539 -> going to get the data for a single page
1142.52 -> get static props so I'm just doing next
1144.559 -> stuff here so if you're familiar with
1146.48 -> next you're familiar with these two
1148.22 -> functions with these two the get static
1150.86 -> paths and the get static props
1154.039 -> we are able to display all of our
1155.78 -> content on this leg page
1158.72 -> and again I'm just pulling out the ID
1160.16 -> the title and the seleg you can have
1162.86 -> more you can list more you can take away
1164.539 -> some maybe you don't want the title but
1167.72 -> we needed the title in this case
1169.64 -> perfect so there's that and then up at
1172.58 -> the top we are just displaying the
1175.1 -> article title again we could have listed
1177.26 -> more but for this demo we're just going
1179.6 -> to stick it there
1185.179 -> so if we go back to our home we see our
1189.32 -> two listed
1192.26 -> if we click on super secret sanity
1194.059 -> Studio let's go make a quick edit so I'm
1196.46 -> going to click into here
1199.34 -> is a shave ice in the desert the content
1202.82 -> editor notices that this isn't correctly
1205.46 -> capitalized so it's a title we need to
1207.559 -> make sure it's capitalized like this hit
1209.84 -> publish
1211.28 -> and if we go to home again we will see
1215 -> right away that that is now correct and
1217.94 -> fixed so
1219.86 -> very quickly somebody was able to go in
1222.2 -> and only if they have access they were
1224.72 -> able to go in and update and edit that
1226.88 -> content they could also go in and create
1229.16 -> content
1230.419 -> so I want to stress how little effort
1232.28 -> and overhead this was so the code you
1235.039 -> have to write was directly rated related
1237.2 -> to the thing that you were actually
1238.46 -> making almost everything else was taken
1241.34 -> care of from here or from the just the
1244.52 -> two files that we made you could deploy
1246.679 -> this to Versa and have your url
1249.76 -> myproject.com admin and you can have
1253.7 -> your editors working on content with you
1257.6 -> so I do want to mention that it is
1259.82 -> possible to make an edit link on the
1261.799 -> website that only appears for people
1263.299 -> logged into sanity and that can take
1265.22 -> them right to the place in the studio
1267.86 -> and then that you can have them
1269.12 -> side-by-side previews in the studio as
1270.799 -> well
1271.28 -> [Music]
1273.14 -> all right so now you have your next JS
1276.26 -> app your sanity Studio embedded and we
1279.919 -> took care of the stuff at the beginning
1281.38 -> and started small we started simple but
1285.26 -> this has allowed us to build for Success
1288.44 -> we now have a great Baseline where we
1292.82 -> are able to create content work with
1295.7 -> teams and it all lives in one nice URL
1300.14 -> so I hope you learned a lot and thank
1303.26 -> you for watching so that's our demo we
1305.48 -> got our sanity Studio embedded into our
1307.58 -> next JS app with only two files at its
1309.98 -> bare minimum so if you want to try this
1312.08 -> out for yourself you can head on over to
1313.9 -> sanity.io next JS conf where you can
1317.659 -> learn more about sanity and get a
1319.46 -> boosted free plan it's always exciting
1321.679 -> to see what you all are building and if
1323.24 -> you're interested in Sharing or to learn
1325.22 -> more from others come find me the rest
1327.5 -> of the sanity team and an awesome sanity
1329.6 -> community in our slack and you can find
1332 -> that at slack Dot sanity.io come follow
1335.24 -> us on Twitter at sanity underscore.io
1337.82 -> and you can find me on Twitter at kapehe
1340.34 -> underscore okay thank you so much for
1342.919 -> listening and I'll see you around
Source: https://www.youtube.com/watch?v=XQ-jl2B2hQI