Next.js Dynamic Routes With Contentful's GraphQL API

Aug 15, 2023

Next.js Dynamic Routes With Contentful's GraphQL API

Next.js has a popular approach for generating dynamic routes. In this episode, whitep4nth3r will teach us how to use Contentful’s GraphQL API to power them!

00:00:00 Intro
00:01:15 Guest Introduction
00:02:43 What do you like about Next.js?
00:06:44 Using GraphQL
00:14:22 What are we doing to do today?
00:16:23 Captioning Sponsored by
00:20:26 Contentful Introduction
00:31:28 Generating an API key
00:33:06 Installing GraphQL Playground
00:37:41 Using Netlify CLI
00:46:50 Using Async Await
00:51:29 Link from next Link
00:53:18 GetStaticPaths function
00:56:45 Fallback Value function
01:07:11 Pulling data like magic
01:22:28 Deploying the site
01:25:33 How to learn more about Contentful

* demo: https://jamstack-memories.netlify.app/

* repo: https://github.com/learnwithjason/jam…

Links:

- https://www.contentful.com/

- https://jamstackconf.com/2021-videos

- https://nextjs.org/docs/basic-feature…

- https://twitter.com/jamstackconf/stat…

- https://github.com/whitep4nth3r/nextj…

- Watch future episodes live https://twitch.tv/jlengstorf

Credits:

Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/…)
Source: http://incompetech.com/music/royalty-…

Artist: http://incompetech.com/

Busybody by Audionautix is licensed under a Creative Commons Attribution license https://creativecommons.org/licenses/…

Artist: http://audionautix.com/

Additional sound effects obtained from https://www.zapsplat.com

Content

3.6 -> hello everyone and welcome to another

6.48 -> episode of learn with jason today on the

9.2 -> show we're bringing in the one and only

11.2 -> white panther thank you so much for

12.719 -> being here

14.24 -> hello and thank you for having me

15.679 -> welcome everybody it's great to be here

17.92 -> finally and i'm feeling good it's friday

20.24 -> night the work week is done

22.24 -> i'm ready to go

24.4 -> i'm i'm very excited to uh to have you

26.88 -> on the show because

28.4 -> you are also a streamer and you are a

32.559 -> very established streamer you uh i would

34.8 -> say that you are probably a

36.88 -> like this is an honor for me because

38.399 -> you're you're coming from

41.84 -> um but so it oh is that a jammy award

44.879 -> winner cassidy asked indeed it is

47.2 -> [Laughter]

50.559 -> congratulations on that by the way that

52.64 -> was uh that's a big win

54.879 -> and i had i was up against some big

57.039 -> names i was

58.399 -> totally convinced that it was not a

60.399 -> chance that i would win so i feel

62.399 -> humbled honored and proud

64.479 -> um

65.36 -> 2021 is turning out to be an interesting

67.6 -> and good year

69.2 -> i'm i'm happy to hear it um yeah i mean

72 -> you're just you're doing some some very

73.76 -> cool things so so well instead of me

76.24 -> trying to like poorly explain everything

78 -> i should let you speak for yourself so

79.439 -> for for folks who aren't familiar with

81.04 -> you do you want to give us a little bit

82.4 -> of a background

83.92 -> okay

84.799 -> uh way back when i was a musician and i

88.479 -> used to teach music in secondary schools

90.72 -> that's high schools and i um quit that

94.56 -> and i was a comedian

96.64 -> and then i got into tech so i was a

99.439 -> front-end developer for a couple of

100.96 -> years and i moved quickly up to being a

103.36 -> tech lead and lead engineer and then i

105.68 -> decided um that

107.84 -> the further you go up in tech the less

109.84 -> tech you do and i got into tech to do

112.64 -> tech oh my god

114.479 -> you're hitting so many of my feelings

116.399 -> right now

118.079 -> and um so

119.68 -> at the beginning of the pandemic i

120.96 -> thought how can i keep up with my tech

122.799 -> skills and i

124.64 -> somehow discovered that people streamed

126.799 -> tech on twitch

128.479 -> and i noticed that there weren't many

130.64 -> women doing it at the time and there

132.64 -> weren't many people doing front end

134.08 -> development at the time and so i thought

136.64 -> there's a gap in the market let's do

138.56 -> that and i did that and here i am now i

142 -> do devrel for contentful and i stream

145.04 -> and i love it and it seems to be a fun

147.04 -> thing and people like it

148.879 -> that's my history

150.879 -> it's great and yeah and so um so you

153.36 -> mentioned contentful so today we're

155.28 -> going to play with a little bit of

156.08 -> contentful we're also going to play with

158 -> next js um

160.4 -> so this this is kind of your like area

162.48 -> of expertise right you you kind of uh

165.76 -> what so i guess what do you like about

168.16 -> the the platform what gets you excited

170.319 -> when you you know what makes you choose

171.92 -> it

173.76 -> um so

175.36 -> next js for me has a

178.48 -> ridiculously easy and relaxing and

182 -> comforting developer experience compared

184.4 -> to other frameworks that i've tried

186.879 -> um and

188.72 -> the intuitiveness of it and the ability

192.4 -> to scale

193.84 -> with nexujs even though i generally

196.08 -> build products that don't need to scale

198.48 -> is actually like pretty powerful coupled

200.72 -> with something like contentful which is

202.64 -> just a headless cms content management

205.12 -> system that just gives you json

207.68 -> you could actually be really really um

210 -> clever with how you architect your

212.56 -> applications and really lean with the

215.2 -> graphql api in how you fetch your data

218.56 -> and so i think graphql coupled with

221.36 -> contentful coupled with next.js has just

223.44 -> been my go-to

225.36 -> that's why i seem to be a lot more

227.2 -> experienced in it over this year because

229.04 -> i've built a lot of projects that

231.12 -> have uh benefited from using this

232.959 -> combination

234.239 -> and i'm learning new stuff about it all

235.92 -> the time as well i don't think i've ever

237.599 -> been able to get this deep into anything

240.4 -> in my tech career and i'm really

242.319 -> enjoying that as well because i get to

243.84 -> learn new stuff when i build new stuff

245.68 -> i'm trying to find like new innovative

247.92 -> things to build to find new ways to use

250.72 -> the framework and

252.08 -> i love that it's open source as well i

253.92 -> actually made my first contribution to

255.68 -> next js this week oh congratulations

258.799 -> so that was cool

260.239 -> and uh so i'm looking forward to seeing

262.24 -> what happens where it goes and and just

264.639 -> um making sure that everyone knows about

266.96 -> how cool the developer experience when

268.639 -> you're working with nextedit yeah very

270.96 -> cool yeah and so today we're we're uh

273.759 -> specifically talking about their dynamic

275.52 -> routes which is i think uh

278 -> a new it was a

280.08 -> i think next was the first one to bring

281.44 -> out this feature right

283.52 -> yes so um and i don't think it's that

285.36 -> old either i think it might be just like

287.36 -> just over a year old maybe when they

289.44 -> really like nailed the experience i know

292.56 -> and so i'm built react applications in

295.04 -> the past actually a lot of my twitch

296.72 -> overlays are built in react and i've got

298.4 -> quite a lot of routing to a lot of

300.08 -> different urls and it's just so fluffy

303.199 -> and you don't know if it's going to work

304.72 -> and how do you pass in query parameters

306.96 -> i still don't really know

308.639 -> and um with next you just put a file in

311.28 -> a folder you just create a folder

313.039 -> structure and and the dynamic routes

315.6 -> though that's where it really comes

317.199 -> alive because you can create thousands

318.96 -> and thousands on thousands of pages with

320.96 -> three lines of code

324 -> fetch your fetch your urls from uh your

326.639 -> cms or your database or whatever or hard

329.199 -> code them in json

330.8 -> tell next to uh cycle around those and

334.24 -> then at build time next creates them

337.36 -> yeah and you can pass dynamic data based

340.72 -> on that slug or that root name or

342.8 -> whatever on each single page statically

346.08 -> generated

347.28 -> and also what i do want to get into

348.8 -> later is there's there's also ways like

350.639 -> you're thinking about um

352.88 -> if if you have thousands and thousands

354.56 -> and thousands of pages that you want to

356.08 -> render at build time dynamically that's

358.479 -> going to increase your build time

361.28 -> considerably and if you've got lots of

363.36 -> editors working on your application and

365.759 -> publishing content your application is

367.919 -> going to be in a constant state of build

369.759 -> but next also provides you ways to get

372.24 -> around that by for example you can set

374.88 -> fullback pages where you can say just

377.919 -> just pre-generate my top 10 pages and

381.039 -> then you can serve aside render

383.52 -> uh the uh

384.96 -> next the other pages so you're not so

387.28 -> you can like reduce your build time and

389.28 -> things like that so they've thought

390.4 -> about this like next js i always say is

392.4 -> static first as static as possible but

395.6 -> it provides you so many other flexible

398.08 -> ways to fetch data to be really clever

401.12 -> with how you serve the content to your

403.68 -> users depending on the type of data that

406.08 -> it is

408.4 -> yeah i i really like that a lot and so

411.039 -> uh so the other thing that we're gonna

412.479 -> use today right is uh

415.12 -> some graphql which i think draft ql is

417.84 -> one of those things that it can

420.72 -> occasionally

422.479 -> be polarizing but i think in general the

425.199 -> web development community tends to

427.84 -> both love and fear graphql right

431.599 -> uh yes

432.8 -> what's your what's your general sense of

434.88 -> of graphql as a

436.88 -> i guess as a protocol i don't even know

439.68 -> what the right way to describe it is

442.639 -> language so a lot of people are very

445.44 -> used to rest apis aren't they they um

448.72 -> you you query um a resource-based

451.28 -> endpoint and you get a bunch of stuff

455.28 -> back that you might not even care about

458.24 -> and say for if if you are constructing a

461.599 -> page made out of ten components that

464.24 -> uses 10 different data sources

466.96 -> you need to make 10 api calls if you're

469.199 -> using a rest api to all those different

471.759 -> bits of data and that's assuming they

473.84 -> don't have any sub queries too like

476.24 -> posts that have like lists of comments

478 -> ids yes

480.319 -> and then with graphql you can actually

482.24 -> make that you can actually request that

484.319 -> data query limits uh notwithstanding uh

488.479 -> you can actually request those ten

490.08 -> pieces of data in a one api call

493.44 -> and you i i feel like graphql gives you

496.319 -> so much control as a front-end developer

499.599 -> uh for

501.039 -> in in terms of what you get get from the

503.68 -> back end i remember when i was a tech

506.16 -> lead

507.039 -> um there was a lot of talk between the

509.44 -> back end and front end developers like

511.36 -> okay back end you need to give me this

514.08 -> in this call and you need to give me

515.519 -> this in that call and there was all

517.599 -> these contracts right whereas graphql

520.64 -> front-end developers don't really need

522.64 -> to to have that conversation as much yes

525.12 -> you need xyz available on the api but

527.76 -> you don't need to say oh can i have an

529.76 -> extra api call for that page please

532.16 -> because i only need um abc rather than

535.519 -> the whole alphabet

537.279 -> and i think that is um really putting

540.32 -> the power in the front-end developer's

542.24 -> hand of their own architecture of their

545.279 -> application yeah and

547.76 -> i'm a big fan of obviously back end and

549.44 -> front end working really closely

550.72 -> together but i think

552.399 -> this empowers front-end developers a lot

554.72 -> more i think it's um

556.88 -> really nice for beginners because i

559.279 -> think with rest apis you can get a lot

561.12 -> of a lot of data back that you have to

563.519 -> traverse through on the front end that

565.12 -> you don't need

566.32 -> and you can actually do transformations

568.399 -> with graphql on the api call rather than

571.2 -> after the fact and that therefore it

573.68 -> greatly speeds up your front-end

575.68 -> application and reduces the need for so

577.6 -> much logic in your front-end application

579.6 -> as well so like fewer bugs right yeah

582.56 -> and it's one of those things that's like

584.24 -> you know uh maple leaf just said in the

586.48 -> in the chat like it's it's can feel like

589.279 -> overkill if you have like one call in

591.6 -> your whole app to set up a full res or

594 -> full graphql api and that's true like a

596.32 -> lot of times when i'm building something

597.76 -> i'll still use rest because i have like

599.92 -> one thing i need to do and it's like i'm

601.519 -> not gonna set up a whole graphql

603.279 -> instance for that but

604.959 -> as soon as you've got you know multiple

607.2 -> queries and some of those query share

609.04 -> data and you have to get nested calls

612 -> like a the the example that i always use

613.92 -> is if you have like a blog

616.48 -> and your blog has a list of posts so you

619.279 -> get one post that post comes back with

622.079 -> an author id reference because you

623.839 -> normalize your data if you're uh if

625.44 -> you're a like data conscious developer

628.16 -> so now you've got an author id okay

629.839 -> that's two requests you've got to make

631.12 -> to go with the author's name right then

633.04 -> you get the list of related posts now

634.88 -> that's another list of ids let's say you

636.56 -> got four okay now you're at six calls

638.72 -> okay but now you're gonna get the

640.079 -> comments there are 150 comments on this

642.399 -> post so

644.24 -> are you you're gonna send another like

646.48 -> now you're at 156 rest api requests and

649.6 -> that's assuming you don't need to make

650.959 -> an additional one to get the comment

652.64 -> author data so this becomes this

654.88 -> exploding problem of complexity and

657.12 -> that's for one blog post right so you

658.88 -> can imagine as it gets into e-commerce

661.44 -> and you've got products reviews ratings

663.839 -> all of these nested pieces you're like

665.519 -> making thousands of api requests for one

668.64 -> product like one product page and

670.56 -> graphql just all that it shrinks down

673.44 -> it's got built-in caching it's got all

675.519 -> of this deduplication you can do all

677.279 -> these amazing things that just make it

680.16 -> like friendly to use and what you

682.079 -> mentioned about front-end and back-end i

683.68 -> remember when i was at ibm

685.6 -> we we were looking at like how do we

687.76 -> solve that problem because we had this

689.2 -> issue where there are dozens of teams

692.079 -> and each one of them is maintaining an

693.76 -> api and that api is getting all these

695.519 -> bespoke rest endpoints because each ui

698.24 -> needs a slightly different thing and

699.76 -> then the uis evolve but they forget to

701.68 -> tell the back end so they don't know

702.959 -> whether or not they need to update that

704.88 -> like do we have to maintain these 35

707.36 -> bespoke rest endpoints we've created or

709.76 -> yeah when we introduced graphql it all

711.76 -> went away like hey make sure this schema

713.6 -> is valid and you can and we had tracing

716.48 -> through where we could even see like

718 -> exactly which fields were getting called

719.68 -> so when they decided if they were going

720.88 -> to remove a field they could see zero

722.56 -> people have ever requested this field

724.079 -> good get rid of it we don't need to

725.2 -> support that data anymore so it's just

727.2 -> it's got a lot of power when you get

729.2 -> into complex use cases

731.44 -> you could even say that graphql is more

733.92 -> environmentally friendly on resources

736.88 -> and energy than rest

739.279 -> because of the the nature of what you

741.519 -> were just describing

743.68 -> environmentally friendly in terms of

745.44 -> developer hours you don't need to

747.04 -> maintain those 35 different rest

749.04 -> endpoints and spend all that power doing

751.36 -> all that work

752.639 -> and then with api calls and server

754.399 -> resources especially when you have a

755.76 -> very large scale application and um

759.04 -> similarly as well if you are just

760.8 -> starting out and you're just starting

762.24 -> out on the jam stack and taking um

764.56 -> advantage of all the the free

766.959 -> um

768 -> tiers that all these like uh services

770.399 -> provide like that define contentful if

772.72 -> you're using graphql you're going to

773.92 -> make fewer api calls therefore using

776.72 -> fewer of your limits meaning you can do

779.04 -> more and go faster without having to

780.8 -> invest at that point

782.399 -> which is great if you're just a hobby

783.68 -> developer right and this is the kind of

785.76 -> thing i've been looking at a lot this

787.04 -> year as well about

788.88 -> trying to work on the jam stack um

791.519 -> in in that kind of hobbyist way to be

794.24 -> able to share the the innovative ways

796.16 -> you can scale on the jam stack for free

798.8 -> as someone who's just starting out who

800.639 -> who can't afford it you know i'm trying

801.92 -> to make tech accessible to all and i

804.399 -> guess graphql makes that kind of tech

806.639 -> more accessible because you don't have

808.399 -> to um you know run up all those

810.56 -> resources and and start paying you know

813.6 -> everything you said just resonates so

815.279 -> much with me and and you like being more

817.839 -> environmentally friendly being able to

819.36 -> start for free and and kind of scale

821.6 -> like i

822.48 -> that's why i am where i am that's why i

824.8 -> like working at netlify is because i'm

827.36 -> i'm i just love the idea of you know it

830.8 -> should you should pay for it when it

832.399 -> makes you money like you shouldn't have

833.92 -> to pay

834.959 -> to learn you shouldn't have to pay

836.959 -> to experiment or validate an idea you

839.76 -> should be able to do all of the things

841.839 -> that let you discover whether or not

843.36 -> something is a good call for you on a

845.199 -> free tier and then as you grow that's

847.92 -> when you should pay like oh you're

849.839 -> making money now good pay the services

851.6 -> that allowed you to make money that's a

853.04 -> that's a good exchange of value but it

854.959 -> can't it should it should never be like

856.72 -> oh you want to learn something give me

858.24 -> give me ten dollars

861.199 -> yeah

862 -> um but no okay so so

865.04 -> let's talk a little bit more concretely

866.639 -> about what we want to do today so

868.839 -> um so jam stack comp just happened uh it

871.92 -> was it was a ton of fun i don't know uh

874.56 -> hey chat who went to jams.com can i get

876.72 -> a

877.44 -> what's the what's the right thing to put

878.959 -> in the chat like once

880.48 -> it's an f if it goes bad what's a yeah i

882.48 -> know i was gonna all like he all that

884.079 -> came to my mind was f what do we do we

886.079 -> do

887.68 -> we

888.8 -> as

889.839 -> a b let's do a b for

892.24 -> a ball in time

900.079 -> i'm going to put a b in chat for the

902.16 -> good time

906.639 -> i will also put a b in the chat

912 -> ballin um no this is great this is this

914.72 -> is really really great um but yeah so

918 -> so today we wanted to play with

920.72 -> contentful and next dynamic roots and

923.199 -> graphql and uh you had a good idea which

926.079 -> was why don't we put together um a list

928.88 -> of like our favorite

930.72 -> pages or our favorite uh things from jam

933.519 -> stack conf and so we just published the

935.519 -> video so anybody who didn't get a chance

937.199 -> to join you'll be able to go and watch

938.399 -> those videos if you want

940.959 -> what is playing something just started

942.639 -> playing on my computer

944.88 -> what is happening

947.12 -> it's the be the bees are too powerful

949.12 -> your stream just started playing

955.36 -> i

956.16 -> i have

957.68 -> i have your your twitch page open for

960.32 -> when we switch over to desktop view and

962.24 -> for whatever reason it's been open for

964.72 -> this whole time and it just started

966.639 -> playing your intro video so that's well

969.44 -> surprised to me i guess um

972 -> okay so so anyways actually maybe this

974.079 -> is as good a good time as any to to

976.24 -> switch over to that view and we can

977.92 -> actually start working on this thing

978.959 -> which i'm very excited about so let's

981.279 -> let's do the thing

985.12 -> here we are okay um

987.759 -> there we are everything's loaded okay so

989.92 -> before we do that let's talk a little

991.92 -> bit about our captioning today we've got

994.88 -> this episode like every episode is being

996.959 -> live captioned we have jordan here with

999.199 -> us from white co-captioning which uh is

1001.68 -> always a pleasure you can watch that

1003.36 -> right on the home page of the site

1004.72 -> learnwithjason.dev

1006.399 -> and that is made possible by our

1008.48 -> sponsors we've got netlify fauna hisura

1011.12 -> and auth0 and actually today is cesura's

1013.6 -> last day at a sponsor so everybody go

1015.279 -> check it out today wave goodbye to

1016.639 -> hasura we're going to we're going to

1018.24 -> send them off with a smile and you know

1020.32 -> if you're looking to sponsor a stream

1022.32 -> i got an opening um okay so uh anyways

1027.199 -> also while you're clicking things on the

1028.559 -> internet make sure you go and uh follow

1031.6 -> white panther on the tweeter

1034.319 -> and we're also on

1036.48 -> twitch so let me do the

1039.36 -> this one did that work

1041.679 -> no i have one of these and it does work

1043.36 -> and i just always get it wrong

1045.6 -> there it is okay uh yeah so there we go

1049.36 -> super bass would be a cool sponsor i

1050.88 -> would i'd love to get super bass as uh

1053.76 -> that was one of my favorite talks

1055.76 -> actually at uh jams.conf from john

1059.28 -> yeah okay well we'll make sure we add it

1061.36 -> to the list

1063.6 -> okay so so speaking of the list um i

1066 -> believe

1067.039 -> i

1067.84 -> got an invite from you to a contentful

1069.84 -> space that i definitely haven't joined

1071.6 -> yet so um let me go and do that

1076.32 -> where else should i

1077.919 -> so i guess let's let's look at like

1079.44 -> nextjs.org

1081.679 -> um this is so this is next js we're

1084 -> going to be working with that

1085.6 -> and then we're going to be working with

1088.24 -> contentful

1091.12 -> so everybody go and look at that

1094.559 -> um then

1097.28 -> we have

1100 -> where's the space

1105.44 -> while you do that i'll just say hi to

1106.799 -> all my regulars who are in your chat

1109.52 -> shouting at me

1111.52 -> and saying hi how you doing nice to see

1113.84 -> you they've missed me because i haven't

1115.039 -> streamed all week you see so they're

1116.72 -> catching their uh

1118.48 -> their panther

1120.08 -> on a different time

1123.76 -> okay

1124.64 -> i've been invited to an organization let

1126.64 -> me see

1127.919 -> i'm gonna log in can i log in and make

1130 -> sure that i get into this one

1132.799 -> copy link

1135.36 -> okay now i'm

1136.96 -> almost positive

1138.96 -> that i have an account already

1147.12 -> not under this email address so

1148.559 -> apparently i have to

1151.2 -> can i change the email

1153.76 -> uh i can invite you to a different email

1156.72 -> yeah it might be easier different user

1158.88 -> yeah

1160.24 -> it's jason langsdorf.com is the one that

1163.44 -> that i have an account for already

1165.6 -> okay

1169.919 -> uses

1171.44 -> realizing now that i definitely should

1172.96 -> have done this before we went live

1175.2 -> jason at lang's store

1181.679 -> dot com

1182.96 -> dot com thanks uh you can

1185.35 -> [Music]

1187.84 -> add you to this space

1192 -> call it learner jason it was a very

1193.36 -> boring space name

1196.4 -> but

1197.28 -> there we go

1198.88 -> send invitation one user is being

1201.28 -> invited one user has been invited to

1202.799 -> your organization

1204.64 -> i'm so ready i'm watching my inbox here

1206.559 -> it is

1207.919 -> okay so now i'm going to come back here

1210.88 -> we're going to try this again

1213.039 -> and i actually have an account for this

1214.96 -> one

1221.919 -> hey yo

1223.76 -> all right there we go

1226.72 -> so

1228.4 -> i no longer know what to do

1230.96 -> okay so here is content contentful so

1233.76 -> content4 is a headless cms that offers

1236 -> you a wonderful web ui to manage your

1239.36 -> content to set up your content model

1242.24 -> which is like your content structures

1244.08 -> and your types so whether it's like a

1245.919 -> blog post or an author or an event or

1248.159 -> something else and um then you can also

1252 -> what we're going to do is install a

1253.919 -> contentful app to explore our graphql

1257.2 -> schema as well because you can do that

1259.6 -> all inside contentful nice so

1262.72 -> let's go to the content model tab

1265.919 -> content model

1267.52 -> and this is where we're going to add our

1269.28 -> content model so this is where we're

1270.72 -> going to add um the the shape of the

1273.44 -> data we're going to store for whatever

1275.36 -> you wanted to put on the front end which

1276.72 -> is like jams like best moments or

1278.32 -> whatever so let's call it

1281.36 -> let's call it we could call it anything

1284 -> like a post or a memory or a video or a

1287.28 -> memory i like that memory let's call it

1289.679 -> a memory there you go um remember that

1291.84 -> uh the api identifier that has been auto

1294.559 -> generated for you there will be getting

1296.08 -> later but with graphql it doesn't matter

1297.919 -> you don't have to remember it because

1299.12 -> graphql is so self-documenting and stuff

1302.32 -> so

1303.44 -> let's press create and now it's time to

1305.6 -> add some fields

1307.36 -> so um we have to decide what we want to

1310 -> store on each memory and if you click

1312.88 -> the add field button

1314.559 -> there are a variety of different types

1316.799 -> of fields that you can choose depending

1318.799 -> on the data and the types of validations

1321.12 -> and the appearances that you want so

1323.36 -> let's start nice and easy with just text

1325.679 -> for the title let's give it a title

1328.559 -> okay

1330.32 -> next

1331.679 -> short text is fine for that uh you don't

1333.76 -> need a list and then if you click the

1336 -> create and configure button

1338.88 -> here's just a nice little thing you so

1340.799 -> what i like to always check when i add a

1342.4 -> title is that checkbox there that says

1344.32 -> this field represents the entry title

1346 -> because in the table that you'll see

1348 -> later that will just show up as the nice

1349.679 -> title in the ui

1351.44 -> on the validation tab

1354.64 -> here's pretty cool um

1356.559 -> i like to pretty much set most of my

1360 -> fields to required because it makes

1362.32 -> front-end coding a lot easier

1364.799 -> i mean obviously some are going to be

1366.08 -> optional but when most of the the base

1368.799 -> ones are required you don't need to do a

1370.24 -> lot of if exists if no blah blah blah on

1372.88 -> the front end you can also do some fun

1374.96 -> stuff like do uh regexes and limit the

1377.679 -> character counts if you've got like a

1379.28 -> particular type of ui where you only

1381.12 -> want like 20 characters or something

1383.039 -> like that which is really cool

1384.72 -> a new thing that's come out with

1386.08 -> contentful recently is the default value

1388.24 -> tab as well so if you've got um

1391.28 -> editors who are doing the same things

1393.679 -> over and over again um with lots of the

1396 -> same data you can pre-populate your

1398 -> fields with with a value which is pretty

1400 -> nice

1401.36 -> if they're the same a lot of the time

1403.36 -> then on the appearance tab you can just

1404.96 -> choose how the different type there'll

1407.36 -> be different options here for each field

1409.44 -> type

1410.4 -> um and so let's just keep single line

1412.799 -> for that and um you can also add help

1415.039 -> text to your viewers uh your editors

1416.96 -> viewers editors if you like um to tell

1420 -> them what kind of data they need to put

1421.76 -> in there so let's press confirm okay

1424.559 -> so i know you wanted to add a youtube

1428 -> video so we could add the youtube id

1430.96 -> to the video that we want so we can

1433.039 -> click add field and i think this one's

1434.48 -> just going to be a text it'll just be

1436.4 -> you know actually do you know what i

1437.52 -> want to show you i think it'd be better

1438.799 -> to add the full

1440.48 -> youtube embed url because then we can

1442.799 -> use the slug appearance which gives you

1444.96 -> a uh preview of the youtube video in the

1446.96 -> ui heck yeah i want to do that do i

1449.279 -> change field type for that

1450.96 -> no no that'll still be no we can still

1452.48 -> use text you'll see and if you just yeah

1455.279 -> call that youtube embed url sweet if you

1458 -> go to create and configure

1461.2 -> um

1462.08 -> you can make it required if you want but

1465.44 -> yeah we might as well because it's

1466.559 -> important actually this is important

1468.72 -> and if you go to the appearance tab if

1470.64 -> you click slug

1473.36 -> url sorry url

1476.48 -> then that will automatically generate

1478.159 -> you a nice youtube preview to check

1480.64 -> you've got the right video

1482.48 -> in the ui

1488.559 -> okay

1490 -> so what else do you want to add

1492.64 -> maybe just a a little bit of um

1495.36 -> like

1496.64 -> why is this my favorite so maybe just a

1498.72 -> little description field

1501.12 -> you probably don't want to use rich text

1502.799 -> if we don't have that long so i would uh

1505.039 -> cancel that one and just use the long

1507.44 -> text option and we can just add some

1509.44 -> mark down

1510.96 -> that's a whole different stream

1514.32 -> okay so let's say uh let's say why is

1518.08 -> this your

1520.08 -> or i guess

1521.919 -> why do you want to keep this memory

1526.559 -> uh you know what i'm just gonna call it

1527.76 -> description so that we can actually

1529.84 -> like pull this out of the the field and

1531.919 -> everything um okay so i'm gonna create

1533.6 -> and configure

1535.039 -> we can make this one optional probably

1536.799 -> so we can like leave it leave it

1538.919 -> optional um

1542.159 -> default value

1544.96 -> you get the appearance markdown i like

1547.52 -> that markdown selected for you that's

1549.919 -> great

1550.799 -> cool

1552.24 -> cool and one thing i think we are going

1553.76 -> to need because we are generating

1555.12 -> dynamic routes we're going to have to

1556.64 -> add a slug field yes now there's a

1559.919 -> really cool feature on this as well so

1561.84 -> if you choose text

1563.76 -> and if we just call this slug okay

1566.4 -> and then

1567.279 -> press create and configure

1569.52 -> and we'll make it required on the

1571.52 -> validation tab because we definitely

1572.96 -> need these slugs if you go to appearance

1576.64 -> and if you click on the slug field and

1578.559 -> if you scroll down a little bit you can

1580.08 -> generate a slug from the title

1583.039 -> that is handy and so

1585.52 -> okay yep i'm in i like that a lot

1589.2 -> okay and i would also always like to

1591.919 -> rearra yeah i was gonna do exactly the

1593.919 -> same thing

1595.279 -> it makes so much sense we're the same

1597.679 -> kind of obsessive hooray

1602.72 -> click save on that

1606.64 -> okay so now we've got a very nice basic

1610.08 -> memory content type

1612.799 -> so let's add a few memories first so

1615.12 -> let's go to the content tab

1617.96 -> content at the top

1621.12 -> oh right right in front of my content

1623.12 -> yep

1624.08 -> and let's add a memory all right

1627.52 -> now i have one memory to add first um

1630.64 -> i would like to add my favorite memory

1633.039 -> which is

1634.08 -> when i won the jammy award

1637.52 -> that was a great i mean what a i mean

1640.32 -> congratulations again

1642.48 -> thank you let's see you are

1647.52 -> here

1648.799 -> there it is look at that it's as if we

1651.2 -> planned the rescheduling of the stream

1653.919 -> to be after the whole thing

1656.799 -> but we didn't

1658.08 -> and so this is our embed url

1661.84 -> how did you get to be able to just

1664.399 -> highlight that on its own because

1665.76 -> whenever i try and copy and embed url it

1667.76 -> copies the whole thing

1670.64 -> just lucky i guess

1672.24 -> yeah

1672.67 -> [Laughter]

1674.64 -> you'll see that the uh youtube video is

1676.64 -> generated for you in the ui which is

1678.32 -> cool

1680.159 -> all right so let me get it why here cool

1685.36 -> oh and there's the yep there's the auto

1687.36 -> slug

1688.32 -> here's the video already in place yeah

1691.36 -> oh

1704.48 -> sweet mark down okay a little mark down

1706.88 -> so we can see it happen

1708.48 -> and ah publish publish publish

1712.48 -> let's add let's say let's add three more

1715.52 -> okay

1716.32 -> so let's just poke through here you

1717.76 -> mentioned uh the the super bass one

1720 -> where yeah that was my favorite where's

1722.32 -> john

1725.44 -> there it is down down down a bit oh was

1727.44 -> i looking right at it

1729.12 -> there it is

1730.24 -> okay

1732 -> hold on let me actually pipe these

1733.919 -> through so that uh people can hear

1735.919 -> instead of just getting like the

1739.36 -> the randomness

1741.62 -> [Applause]

1745.84 -> oh my goodness

1747.84 -> anyways uh the whole conference if you

1749.679 -> didn't get a chance to join was about

1752.24 -> that ridiculous so i uh i very much hope

1755.44 -> that you take some time to watch it

1756.72 -> because it was so much fun to make so i

1759.12 -> got my i got a slap bracelet coming a

1762 -> limited edition jam stack slap bracelet

1765.679 -> i cannot wait to

1767.44 -> slap it

1773.919 -> let's put this one in good

1776.64 -> and then

1777.22 -> [Applause]

1779.36 -> any any thoughts on why oh the i enjoyed

1782.159 -> this one because of the dj khaled kanye

1785.52 -> west beyonce all the rappers

1788.24 -> were were living it up together

1792.88 -> who was there was the fourth one there

1794.24 -> was a fourth one oh uh jay-z as well

1797.12 -> there you go those four rappers were

1799.279 -> living it up together as neighbors

1803.76 -> i love it all right so let's get this

1806.24 -> one published and then uh let's let's go

1809.44 -> down here there were there were so many

1811.44 -> good ones here one that i really enjoyed

1813.76 -> was uh rich harris's talk about

1816.88 -> transitional apps

1818.559 -> so um if you didn't watch this one this

1820.559 -> one is a very good read i are a very

1822.72 -> good listen i would definitely recommend

1824.159 -> checking it out

1825.679 -> rich is very smart

1827.919 -> and has a lot of fun ideas so that is a

1830.399 -> good one to watch

1831.919 -> let's get this one added here

1836.24 -> and

1839.2 -> get the title out

1844.159 -> and i'm just gonna

1848.159 -> that's the hashtag that rich wants to

1850.08 -> get trending

1851.62 -> [Laughter]

1853.2 -> and

1854 -> and i also really liked the redwood js

1856.799 -> one for the funny hats

1858.799 -> and how the talk that the the quick talk

1861.6 -> descended into chaos

1865.2 -> throughout

1868.799 -> all right so let's get this one in here

1872.399 -> one more

1874.88 -> and

1877.6 -> jam snacks

1880.559 -> okay

1887.039 -> funny hats funny hats in chaos what

1889.679 -> everybody wants

1891.12 -> okay so we're ready now

1893.76 -> to let's install the graphql explorer

1896 -> but before we do that let's generate an

1897.6 -> api key so because we're going to need

1899.44 -> that when we install the graphql

1900.88 -> explorer so if you go to

1902.88 -> settings

1905.2 -> and api keys so right now you don't have

1908.399 -> one so you can't read your content um

1910.96 -> you have a space id but we need an

1912.399 -> access token to be able to read the

1914.72 -> content and these access tokens um the

1917.6 -> one we're going to use is read only and

1919.679 -> so you don't need to worry about making

1921.44 -> it private or whatever because no one

1923.2 -> can do anything with it apart from read

1924.799 -> the data that we're putting in so if you

1926.64 -> click on add api key in the top right

1930.399 -> and then it's done it for you so what

1932.72 -> you're going to need in a minute when we

1935.279 -> uh install the graphql explorer is the

1937.2 -> content preview api token so if you just

1939.519 -> copy the content preview api token got

1942.72 -> it keep that in your clipboard okay now

1945.039 -> let's go and install an app

1947.279 -> so if you go to the app

1949.84 -> apps menu item and go to manage apps now

1952.64 -> a really cool thing about apps that's

1954.399 -> just come out

1956.159 -> is app sharing

1957.919 -> now the contentful lets you um

1961.279 -> extend the ui and extend your editor's

1963.44 -> experience by building custom apps with

1965.44 -> an open source framework um we have like

1968 -> a npx create contentful app thing set up

1970.799 -> you can use and a whole design system

1972.32 -> and everything and as of this week you

1975.2 -> can now share your apps between

1976.96 -> organizations rather than having to

1978.72 -> install a separate installation of it

1982.159 -> so we're kind of creating this like big

1983.84 -> ecosystem and we're hoping that the

1985.919 -> community is going to be able to share

1987.2 -> their apps and and build loads of really

1988.799 -> cool stuff to enhance the editor

1990.48 -> experience very well we're going to

1992.24 -> install now

1993.519 -> is the graphql explorer you'll see a

1995.919 -> little graphql icon as you scroll down

1999.12 -> there it is go for a playground click on

2001.12 -> that

2001.919 -> okay and click install

2004.72 -> built by my colleague stefan just click

2007.519 -> authorize access there

2009.919 -> and it will ask you to paste in that key

2012.08 -> that you just copied

2014.48 -> the cpa token so this reason why

2017.679 -> or do i need to roll this later

2019.84 -> no that's fine that's it's read only

2021.84 -> it's just gonna have access to your

2024.32 -> preview content uh the reason why the

2027.2 -> graphql playground asks for preview

2029.039 -> content is because you want to be able

2031.12 -> to query preview content in the explorer

2034.72 -> rather than just published content so if

2037.12 -> i've got like drafts and stuff they'll

2038.88 -> still show up now and if i'd put the

2041.039 -> other token in it would still work but

2043.039 -> it would only show me my published

2044.24 -> content or would you yeah if you if you

2046.399 -> asked for preview content it wouldn't

2048.079 -> give you it in the explorer got it got

2050.24 -> it got it so click install

2054.879 -> and then if you um if you refresh the

2058.32 -> page you have to refresh it for it to

2059.599 -> show up in the navigation currently

2062.96 -> and then if you click on the apps item

2064.72 -> again and we can go into graphql

2067.04 -> explorer there it is playground i keep

2069.04 -> saying explorer because it's kind of the

2070.399 -> same isn't it right so here is a graphql

2073.119 -> playground

2074.48 -> and this is the beauty of graphql and

2076.8 -> that is completely self-documenting

2078.079 -> you've already clicked on the docs tab

2079.839 -> already and this is where the schema is

2083.2 -> generated from the

2085.839 -> shape of your space

2087.599 -> no so now with you know with rest when

2089.599 -> you have to go and read loads of

2090.639 -> documents to see what's available what

2092.399 -> endpoints have i got available what do i

2094.159 -> query what am i going to get back

2095.839 -> graphql tells you everything and what's

2098.96 -> really cool

2100.079 -> is if you press ctrl space

2102.64 -> it gives you hints

2104.32 -> um in there of what you can query i was

2107.04 -> i was just going to show this trick

2108.64 -> because this is like i live and die by

2110.56 -> this trick uh so if i want to get i'm

2113.04 -> assuming a memory collection is how i

2114.56 -> get all of them right yes okay so i'm

2117.52 -> going to go here and then you can just

2119.68 -> open some brackets ctrl space let's find

2122.079 -> out what's in here oh here's some items

2123.68 -> that's probably what i want let's try it

2125.68 -> again here's our title

2128.079 -> our slug what else do we want we want

2130.48 -> the youtube embed url do i need anything

2133.599 -> else maybe the description okay i just

2135.52 -> wrote a query

2138 -> we're done how easy was that right i

2140.16 -> didn't have to look at a single page of

2141.92 -> documentation y'all that's the

2143.92 -> superpower like that's why graphql is so

2146.64 -> freaking cool

2148.88 -> just give me what i want yo

2150.91 -> [Laughter]

2152.96 -> so that's the query right so um we're

2154.88 -> ready now to spin up a new next js app

2157.839 -> and query that

2159.76 -> okay i'm ready i have my my

2163.359 -> terminal set up and i can create an app

2166.72 -> um okay

2168.4 -> do you have a preferred way of doing it

2170.56 -> i normally do npx create next app

2175.2 -> jab stack memories

2184.24 -> and it's all it's all gonna do it for us

2186.4 -> this is this is how i live my life i

2187.92 -> pretty much do this most week most weeks

2191.04 -> new next is application

2194 -> okay

2195.599 -> did it already install

2197.359 -> wait where am i

2202.8 -> already did the npm install so now we

2204.56 -> can just straight run this thing yeah we

2206.96 -> can

2211.2 -> i love seeing everybody's different

2212.8 -> aliases for npm run

2216.24 -> so i the reason that i use netlify dev

2219.76 -> is because it lets me use some of the

2221.92 -> stuff that i like just heavily lean on

2224.24 -> like netflix functions in in local dev

2227.44 -> and if we if we were using or when we

2230.32 -> start using environment variables this

2232.32 -> will also mean we don't have to set up a

2233.599 -> dot end we can set it for the production

2236.16 -> site and it'll pull it in for us like

2239.28 -> it's very i didn't know that

2241.28 -> i'm gonna i'm gonna try that out okay

2243.599 -> cool so um let's just do everything on

2246.56 -> our what we're gonna do is um

2248.72 -> first of all let's get all of our data

2250.88 -> on the index page let's just get all of

2253.119 -> our data so we can create links to each

2255.839 -> memory okay so i made a mistake by not

2258.96 -> opening this first but now that i've

2260.64 -> started it let me start it again

2265.28 -> and so how do you how are you how do you

2267.44 -> add environment variables now then

2269.76 -> locally would you do it on the command

2271.119 -> line via the netlife cli uh yeah so we

2274.16 -> we we can um there's a a command we can

2277.92 -> run so maybe i'll just keep this open uh

2280.16 -> we go here and here and

2283.04 -> memories so if i run like

2286.079 -> m set

2287.44 -> and then i can say some

2293.76 -> it will try to set it now i haven't

2295.359 -> actually hooked this up to a site yet so

2296.96 -> once we deploy it

2300.079 -> it'll actually attach it to that site

2302 -> and then we get a two-way communication

2303.44 -> between it there's also some cool stuff

2305.2 -> i can do like we can run it and just

2307.119 -> make it available live so people can see

2309.28 -> my local instance for sharing quickly

2311.359 -> and getting feedback and stuff there's

2313.68 -> we don't talk about the netlify cli and

2315.92 -> i don't know why we don't talk about it

2318.16 -> like we're trying to fix that because it

2319.839 -> does so much stuff and i just like no

2322.079 -> one knows about it

2323.68 -> i am going i am going on this train

2326.16 -> don't worry don't you worry

2328.079 -> okay um so we are going to need two

2330.32 -> environment variables in order to um

2333.28 -> to query the data anyway i don't know

2334.96 -> whether you want to just hard code them

2336.24 -> right now or add a project out the file

2338.4 -> and add them like that how about this

2340.32 -> why don't we just deploy this site

2342 -> because and then we can just deploy it

2343.68 -> as we go so let me um so i'm using the

2345.92 -> netlify

2347.119 -> cli so i'm going to netify init

2350.8 -> and it's going to

2353.599 -> oh i need to connect to github first

2355.68 -> okay so i already did a git in it yes

2358.88 -> okay so let me get at everything and

2360.72 -> just check it

2362.16 -> so this is a pretty straightforward like

2363.92 -> default thing all right so let me

2366.64 -> get commit and we'll say

2371.119 -> initial site

2374.48 -> skellington

2377.599 -> okay and then i'm going to use the

2379.76 -> github cli and we'll do a github repo

2382 -> create and i want to see laughing at

2384 -> what cassidy said

2386.48 -> this is my sick voice cassidy you don't

2388.72 -> want this voice in your ear all day

2390.8 -> every day maybe you do i don't know

2394.16 -> okay so i use the the github cli to

2396.24 -> create a new repo called jam stack

2398.079 -> memories

2401.68 -> i love the github cli as well i kind of

2404.24 -> i that's all i use and it's just so so

2406.64 -> nice cli is the way forward cli is the

2408.96 -> future it really

2410.8 -> like i can't even

2412.64 -> process

2413.599 -> how much it makes a giant difference for

2415.68 -> me because check this out we we now have

2418 -> that's all set up like this exists and

2420.48 -> so now i can network init

2423.839 -> going to create and configure a new site

2426.079 -> we're going to put it on my magic isn't

2428 -> it this this is the magic of of the

2431.44 -> world we live in right now

2433.76 -> and it's auto detecting what our

2435.839 -> commands are so we're going to use next

2437.2 -> build we're going to set the directory

2438.64 -> to out

2439.68 -> um we're just going to use the essential

2441.119 -> nexjs plugin which lets us run like the

2443.04 -> next api routes and stuff so on we go

2446.72 -> it's going to set up our netlife.tamil

2448.4 -> for us

2450.56 -> all right so that's done and now uh we

2453.28 -> need to set some environment variables

2455.119 -> so i need the

2456.56 -> is it the deploy preview or the preview

2458.319 -> so you need the space id

2461.44 -> first of all

2463.52 -> space id is there like a format i need

2465.599 -> to use for these

2468.48 -> no

2469.2 -> okay it's oh it's sorry it's you'll find

2471.44 -> it in your contentful space and it's

2472.8 -> just a 12 character

2474.88 -> thingy there you go it's this one that's

2476.64 -> it okay yeah

2478.4 -> and it doesn't matter what i call it

2479.599 -> like you the code's not going to look

2481.28 -> for it we'll put it we'll put it in the

2482.64 -> code yeah okay and uh then the access

2485.68 -> token now this is the delivery token you

2487.68 -> don't want the preview token

2490.079 -> delivery token and this is another uh

2492.64 -> read-only one right so if i share it

2494.56 -> it's fine yeah and if you just get that

2496.72 -> from the settings api keys

2498.96 -> area

2500.16 -> add api key we're going to create a

2503.839 -> delivery token yeah that's the one you

2506.4 -> want okay so back over here we go

2510.4 -> you've lost your query now but never

2511.76 -> mind it was so quick to make you could

2513.2 -> just make it again oh no okay so we'll

2515.92 -> we'll go back

2517.68 -> let's see if it remembers me

2523.28 -> no okay that's fine let's let's do it

2526.16 -> again

2527.599 -> so we'll get our memory i made that

2529.119 -> mistake all the time because i i presume

2531.2 -> it's so nice i presume that i it should

2533.92 -> have saved it for me but oh do all the

2536.88 -> time oh wait i need my items

2539.599 -> and then i'll get my title

2541.92 -> slug

2543.44 -> youtube and description

2545.76 -> okay just run that to make sure it works

2547.44 -> there it is all good okay so now i've

2549.44 -> got that and i have got that

2552.319 -> so on the index first of all on the

2554.64 -> index on the home page we are going to

2556.64 -> use get static props just to fetch all

2561.52 -> of this data so we can create

2564.079 -> client-side links using next link to

2567.599 -> each different route okay what's your

2570.4 -> preference top or bottom of the file for

2571.92 -> these

2572.8 -> bottom okay

2575.28 -> so i'm gonna wow i've never done it at

2577.119 -> the top should i change my life and do

2579.04 -> it at the top

2581.2 -> i mean

2582.24 -> i will i will never judge somebody for

2584.96 -> how they choose to organize their files

2589.52 -> i sense a butt

2591.28 -> no not at all i uh i have no judgment

2594.319 -> for the way that people organize files i

2596.24 -> put mine at the top only because i i put

2599.52 -> stuff in the order that it gets

2601.359 -> interpreted

2602.48 -> so that i like as i'm scanning down a

2604.72 -> page i see all the stuff that's going to

2606.56 -> happen and then i see it get used

2608.56 -> instead of like where did this function

2610.48 -> come from oh it's at the bottom where

2611.599 -> did this function close at the bottom

2613.119 -> it's very interesting i like to see the

2615.119 -> way i visualize it is that you've got

2618 -> all of the the front end components and

2619.68 -> then like here's my front end right but

2621.839 -> then here's all the stuff i need for it

2623.599 -> that i'm going to

2625.28 -> throw from the bottom like a basketball

2627.28 -> hoop into the component i think of it

2629.839 -> like that i don't know why

2632.16 -> anyway let's just do um

2634.64 -> what i how i always write this is i

2637.119 -> always return props

2639.599 -> and then decide on the data i'm going to

2641.599 -> return at the bottom of that function

2644.56 -> and then um so we're going to return

2646.96 -> memories i'm just going to return

2648.8 -> memories which is going to be an array

2650.8 -> and then i

2652.64 -> construct what my and then yeah then

2654.4 -> normally i will put the memories into

2656.56 -> the top of the component and then check

2658.56 -> it still runs with an empty array and

2660.4 -> then i generate my memories

2662.88 -> getting them from the data okay and so

2665.76 -> because we because we return to prop

2667.68 -> called memories we get a prop called

2669.76 -> memories here that's the magic of of the

2671.839 -> next get static props so then let's do a

2675.359 -> little bit of

2676.72 -> editing here

2678.16 -> and we'll just get rid of all of this

2682.56 -> i wrote a bash script to reset a new

2685.04 -> next app that clears all this stuff up

2687.04 -> and does all this stuff to find it it's

2689.119 -> on my website because i was sick of

2690.88 -> doing it all the time

2692.96 -> so it's easier to have my favorite

2694.48 -> debugging trick which is to just

2696.96 -> stringify stuff

2700.64 -> okay so we've got that and then i'm just

2702.64 -> gonna i'm just gonna simplify this down

2704.56 -> as much as i can so we've got

2708.079 -> i'm um okay i'll i'll update this i

2710.24 -> guess

2712.8 -> okay

2713.839 -> so that should work and then if i so

2715.68 -> that should now run yeah and now check

2717.839 -> this out when i run this because i'm

2720.16 -> using netlifydev

2722.56 -> there are my environment variables so we

2725.359 -> now have access to those and then if i

2727.92 -> if i go to netlify as well

2730.72 -> um

2731.76 -> i will have my

2734.16 -> see if i click through to it it's

2737.359 -> here

2739.119 -> but it opened in the wrong tab so let me

2740.72 -> pull that over

2743.119 -> it's also now in my site settings

2747.44 -> under the environment

2749.68 -> so we just it like lets you do all this

2751.76 -> work that would have required clicking

2753.119 -> around and ui stuff

2755.2 -> and i don't have to set up my like

2757.52 -> dot end package and all those things

2760.079 -> like things just work and that's very

2761.92 -> very convenient for me beautiful

2764.16 -> um what is error

2766.88 -> socket hang up

2768.4 -> i did oh there it is okay

2771.28 -> memories empty

2772.839 -> array

2774.4 -> and if we turn this into something like

2775.92 -> you know we have our

2778.96 -> one two three

2780.72 -> right we do something like that

2782.88 -> and there it is so

2784.96 -> this

2786.16 -> this is good debugging

2788.72 -> i use this you know i i need to do more

2790.88 -> of this because i normally just put it

2792.16 -> out onto the terminal console but and i

2794.16 -> when i used to build apps years and

2796 -> years and years ago i used to always use

2797.92 -> a pre-tag to print out stuff when i

2799.68 -> built stuff with angular and this i need

2802.24 -> to go back to this because it's so good

2804.079 -> also to show people what you're doing

2805.599 -> rather than having to go back to a

2806.72 -> terminal and stuff so i've learned i've

2808.64 -> learned with jason

2810.079 -> love it

2810.92 -> [Laughter]

2813.839 -> okay and so do we have access to uh

2816.96 -> i need to install like node fetch or

2818.72 -> something right nope uh next js just

2822.16 -> polyfills it all for you you can just

2824.4 -> use

2825.2 -> async await wherever you want

2828.4 -> okay so i need to async this function

2830.96 -> yeah i can spell it correctly

2833.359 -> and then we will await fetch

2836.24 -> and yeah

2837.599 -> the url so i know what my ui is

2840.88 -> so you'll find that in the uh graphql

2843.839 -> playground

2847.92 -> and um i would usually replace the space

2851.68 -> id with your environment variable there

2857.04 -> contentful

2858.4 -> space id

2860.319 -> uh-huh okay and then you need to send

2863.839 -> some headers in

2867.2 -> just two little headers

2868.96 -> um one of them is authorization

2873.599 -> and is this like a bearer

2875.76 -> yep and then um the

2878.4 -> access token

2883.28 -> i gotta look this one up i forgot what i

2884.8 -> called it content for delivery token you

2887.599 -> called it okay

2889.92 -> and content type which is application

2892.24 -> json

2894.72 -> i like that was a very french

2895.839 -> pronunciation

2897.599 -> application

2900.4 -> you are testing me here because i

2901.599 -> haven't got this up in front of me and i

2903.119 -> think i can do this and then after the

2904.96 -> headers we want the body and we're going

2906.24 -> to json a string of i the query that you

2909.2 -> defined um below

2912.16 -> um

2912.96 -> and uh then you're good to go

2916.16 -> oh and then you need to response.json

2919.359 -> the response

2923.31 -> [Laughter]

2924.8 -> just saw

2928.079 -> okay so we've got that and then um

2932.079 -> i always do just like a little

2934.319 -> little baby check here

2936.28 -> [Music]

2941.28 -> i'm just gonna wait for cassidy's all

2943.119 -> cassidy's iterations of your song as you

2946.24 -> do this

2949.28 -> okay so if we do it that way we're gonna

2951.28 -> get back

2953.119 -> data memory collection and i want

2955.76 -> data.memory

2957.28 -> items the items yes okay so we're gonna

2960.079 -> be able to say

2962.72 -> uh result oh wait no i need

2966.559 -> i need more

2971.119 -> await

2972.44 -> result.js json

2974.88 -> and then

2975.93 -> [Laughter]

2977.28 -> the memories will be

2980.4 -> theta dot

2983.119 -> memory collection dot items

2986.48 -> okay so now that we've got those

2988.48 -> we can put these in instead of

2991.839 -> a hard-coded

2993.44 -> uh array

2994.8 -> and theoretically speaking

2998 -> first time

3000.319 -> because i got my headers right

3003.92 -> oh you need to do post you do method

3005.92 -> post oh dang it we were so close i

3008.64 -> forgot that one too

3014.16 -> for everybody who's curious we like this

3016.24 -> is graphql without uh graphql client so

3019.44 -> we're we're sending this the same way

3021.04 -> that you would send a rest call um

3023.119 -> without any additional libraries or

3024.96 -> anything and that's uh that's a very

3027.599 -> handy way

3029.04 -> i love that too about graphql because

3030.96 -> you don't have to install any

3031.92 -> dependencies and everyone who knows me

3033.52 -> knows i hate installing dependencies

3035.52 -> look we did it we got it

3040.8 -> that's it right we're done this is the

3041.92 -> whole website done see you later

3046.16 -> so meta right so what i'd like to do on

3048.319 -> this home page

3049.839 -> is um loop through the memories just

3052.64 -> with map or something and then we want

3055.44 -> to import next link at the top of the

3059.119 -> file and i want to create a client-side

3061.68 -> route to these um

3063.76 -> the slugs of each

3066.4 -> memory okay so we can set up let's

3070.48 -> let's just do it as an unordered list

3072.48 -> because those are fast to set up

3075.68 -> and for each of these we're going to do

3078 -> an li and we'll give it a key of like

3080.16 -> memory dot slug and that's fine i was

3083.599 -> gonna say get the id but yeah we can

3085.599 -> just do that that's fine

3087.92 -> yeah i yeah if if we decide we care we

3090.559 -> can fix it yeah um and then we wanted a

3092.8 -> link can i auto import no let's get

3098.88 -> import link

3100.559 -> from next link

3102.48 -> so for those of you don't know link from

3104.16 -> next link and enables a client-side

3107.04 -> route so it's not like a browser-side

3109.44 -> browser full redirect new request and

3112.319 -> that's what makes client-side routing

3114 -> really speedy and it feels like you

3115.92 -> don't ever leave the page and that's

3117.839 -> what we want because we're going to a

3120.4 -> root that exists in the app

3122.72 -> so how do you want to structure this

3124.079 -> slug

3125.28 -> huh

3126.4 -> i mean it doesn't really matter we can

3127.92 -> just

3129.2 -> go straight to the slug right now can't

3131.52 -> we

3132.72 -> memory dot slug

3135.2 -> and then

3138.4 -> memory.title

3140.88 -> title

3142.559 -> okay so that'll that'll do it i think

3146.48 -> probably don't do this anymore

3158.48 -> there we go okay so our links aren't

3160.8 -> very linky

3162.319 -> um but they are actually links

3164.88 -> but when i click through

3166.72 -> nothing we got 404 let's fix the 404s

3170.559 -> we can fix it what we want to do

3172.96 -> inside the pages folder we want to

3175.359 -> create a file called

3178.8 -> square bracket memory.js

3184.2 -> memory.js

3186.079 -> and this is a dynamic route when you

3188.319 -> have a square bracket file like this

3190.88 -> inside the pages folder you can also

3192.64 -> nest them as well inside different

3194.96 -> folders such as slash

3196.72 -> blog slash post slash memory slash

3199.2 -> whatever you want

3202.24 -> and the next function that we're going

3203.599 -> to write is

3205.68 -> the piece of resistance of creating

3207.839 -> dynamic fruits with nectar yes so we're

3209.76 -> going to export an async function

3213.28 -> called get static paths

3217.119 -> paths i got a video

3220.72 -> you did yes so the path is what's going

3222.72 -> to create this function is what's going

3223.92 -> to create all of the different routes

3226 -> dynamically based on the

3228.24 -> uh data that we provide it so

3230.72 -> normally um

3232.16 -> because you're using the same query that

3234 -> we're going to use well we're not even

3235.68 -> gonna use the same query you can now

3237.599 -> create a graphql query that just gets

3240.319 -> the slugs

3241.839 -> um of the memories

3244.24 -> and not all the other stuff

3247.359 -> okay so let me grab all of this and so

3250.079 -> if we were writing a more production

3251.76 -> ready app we'd probably abstract this

3253.44 -> out a little bit but

3254.96 -> instead

3256 -> we're just going to copy pasta because

3257.28 -> that's how you get things done

3260.079 -> so we now have just a slug

3262.72 -> and so

3264.559 -> i can call this

3266.48 -> memory slugs instead

3269.28 -> which that sounds like something you

3270.559 -> would read about in like a superhero

3271.92 -> comic book like oh we gotta battle the

3273.52 -> memory slugs

3278.799 -> uh quick get out of the song

3283.44 -> right we're going to return from this we

3285.599 -> return some slightly different things um

3287.76 -> here we're going to return um an array

3289.839 -> of paths so paths array

3293.52 -> and the format of this array so we're

3296.48 -> going to probably create this above this

3298.48 -> is a an object with key params which is

3301.839 -> an object

3304.96 -> um which will be the um

3308.559 -> which has

3310.079 -> we're going to have um

3311.599 -> slug

3312.799 -> is the value

3314.96 -> got it

3315.92 -> okay so let's

3317.92 -> make this happen um we can

3322.24 -> paths will be memory slugs dot

3326.16 -> map and we'll get a slug

3329.76 -> and then an easy raid

3331.92 -> thank you for the raid oh yeah what's

3334.559 -> going on with my volume over here we

3336.079 -> don't have any sound let me let me

3337.839 -> restart the overlay

3340 -> um because that's

3342.4 -> unacceptable to not have any audio

3345.04 -> it's the worst isn't it i hate it when

3346.48 -> that happens yeah let's let's see

3349.44 -> thank you for the raid jacob um and i

3351.68 -> look did somebody

3354.319 -> i saw

3355.599 -> subs and all sorts of stuff so thank you

3358.64 -> i think cassidy just hit 11 months so

3361.2 -> almost almost a year so thank you for

3363.44 -> that and i saw somebody else sub earlier

3365.44 -> and i'm sorry i didn't say anything

3367.119 -> do we have noise now

3370 -> no um oh there it is okay we got noise

3372.72 -> uh good good

3374.64 -> we have we have volume back so if

3376.48 -> anybody wants to make noise you can you

3378.079 -> can do that now

3379.68 -> uh victor has asked why are we using get

3381.28 -> static passes because we are generating

3383.76 -> dynamic routes based on the data via the

3386.4 -> graphql

3388.839 -> api and then we will use get static

3391.359 -> props to get the

3394 -> data for each post by slug where we'll

3397.119 -> write another graphql query where we'll

3399.04 -> query one post by its own slug

3402.559 -> and we also want to return

3404.48 -> um with uh the

3406.96 -> at the bottom of this function a

3408.72 -> fullback value

3410.559 -> now i'll just explain what the fullback

3412.4 -> value means

3413.92 -> fullback can either be true false or

3416.4 -> blocking

3417.599 -> now fallback true

3420.079 -> is so remember what i talked at the

3421.52 -> beginning about if you had like

3422.72 -> thousands and thousands of pages and you

3424.48 -> only wanted to generate your top 10

3427.44 -> staff

3428.24 -> dynamic routes at build time

3430.48 -> if you do fall back true

3432.4 -> on the uh component of the page above

3435.68 -> this function you would use next router

3438.319 -> to detect whether it's a full back in a

3440.72 -> full back state or not and then you can

3442.64 -> show like a skeleton loader or a loading

3444.64 -> thing and then next will automatically

3447.839 -> generate that for you statically on the

3449.92 -> server um without having to generate it

3453.44 -> at build time and take up your build

3454.88 -> resources

3456.079 -> if you use false it just returns um a

3459.04 -> 404

3461.599 -> if it doesn't exist and then the

3463.52 -> blocking uh does something else

3465.839 -> different which i can't remember right

3467.599 -> now

3468.319 -> i think

3469.2 -> blocking instead of the skeleton it

3471.119 -> would it would wait until the render is

3472.96 -> done and then it would yes

3475.359 -> yes so you see nothing so you either see

3477.839 -> nothing with blocking you see

3480 -> a 404 if it doesn't exist already with

3482.48 -> fullback

3483.52 -> false and with fullbacktree you can show

3485.76 -> loading animations and things like that

3488.079 -> so i think for this one we we're going

3489.839 -> to generate them all right now so we can

3491.44 -> just say uh fullback false okay because

3493.92 -> we're going to generate them all

3495.599 -> okay

3496.48 -> and that should generate all of our

3499.52 -> dynamic routes so technically right now

3502.319 -> in if you run a next build command you

3506.24 -> would see um in the next folder um all

3509.44 -> of the routes being uh generated

3513.04 -> let's do it from if it if the code works

3516.48 -> yeah i mean

3519.68 -> it's a big if

3521.119 -> which i always like to show this when i

3522.72 -> show this because you can't really like

3524.079 -> get the full appreciation of what it's

3525.44 -> actually doing at build time

3530 -> oh did you pass in memory

3534.799 -> uh

3535.839 -> go down a sec

3537.839 -> go down a bit

3541.599 -> yes it um because we called the file

3546.4 -> memory you need to uh where

3549.44 -> yeah because we called the file memory

3551.28 -> the param needs to be memory there you

3553.2 -> go okay okay got it got it got it let's

3555.839 -> try again i make that mistake as well

3557.52 -> all the time

3560.72 -> because it is a slug but we called the

3562.319 -> file member no

3564.4 -> no

3566.319 -> okay is there like an actual error here

3568.4 -> props must be returned as a plain object

3571.119 -> because we're not returning any props

3573.2 -> from right so let's just keep let's do

3575.52 -> that build in a minute and we need to

3576.64 -> return get static props

3581.359 -> uh okay so export ac function get static

3585.52 -> props and from this one we can just

3587.76 -> return

3589.119 -> props everything right now yeah and then

3591.839 -> we can try it and it should work yeah

3593.68 -> you gonna do it do the thing

3597.119 -> do the thing no do the thing still not

3598.96 -> doing the thing but it's doing some

3600.079 -> things

3601.28 -> uh collecting page data it failed size

3604.319 -> zero body zero

3607.359 -> what are you

3611.119 -> 401 401 unauthorized

3615.28 -> oh it's because i okay it's because i

3617.28 -> didn't use the

3619.2 -> that's just

3620.12 -> [Laughter]

3623.52 -> okay very good so now it's gonna build

3626 -> um

3627.359 -> but it will it build locally now or just

3628.88 -> it'll build on netflix it's going to

3630.079 -> build locally

3631.359 -> so this is this is a simulation of our

3633.68 -> our buildbot uh which is a good way to

3635.68 -> test like how everything's going to run

3637.68 -> when you when you deploy it

3639.92 -> uh so this is like if you've looked at a

3642.319 -> netflix deploy log this is going to look

3643.76 -> really familiar

3646.16 -> site is live i love seeing that at the

3648.4 -> end with this bar because this website

3650.4 -> is live

3655.04 -> okay success all done and it built out

3657.359 -> the routes

3658.559 -> and this is some stuff that we have to

3659.839 -> do at nutlify to make the

3662.079 -> the

3662.88 -> dynamic rendering work so we just kind

3664.559 -> of deploy it to serverless functions

3666.88 -> um

3668.079 -> so if that built locally if you go into

3669.599 -> your dot next folder you'll see

3672.4 -> the

3673.2 -> different html pages that have been

3675.359 -> built from the data that we got from the

3677.599 -> graph card api and i just it's so

3679.68 -> satisfying to see that happen that is

3681.76 -> extremely

3682.839 -> satisfying i'm trying to get this to

3684.799 -> wrap so that we can

3686.64 -> no i just broke it all

3688.319 -> never mind okay never mind anyway so you

3691.04 -> can see the files

3692.72 -> yeah you can see that they're there um

3694.88 -> and they have this to do content right

3697.68 -> and then if we run this

3700.4 -> we'll be able to actually visit the

3701.839 -> pages but they'll be to do's

3708.24 -> i don't know why this just happened but

3709.68 -> you said that and in my head i went baby

3712.64 -> shark to do to do to do oh don't even

3714.799 -> everyone knows how much i hate that song

3716.24 -> don't even please stop i hate you now

3718.799 -> i leave i'm leaving

3722.64 -> bye

3726.64 -> okay so here we go we got it we got uh

3728.88 -> we've got this thing

3730.079 -> like

3731.039 -> functional at least the the urls work

3733.68 -> and i can click into any of these

3735.68 -> and the the slug is there

3738.16 -> good good okay so then the next thing

3740.319 -> would be to actually the next thing

3742.72 -> in get static props we receive a params

3746.079 -> object

3747.44 -> which comes in um destructured like that

3750.079 -> yeah and we will have available um

3752.48 -> inside this function params.memory

3756.4 -> in this case which is going to be weird

3759.119 -> because it's actually the slug we're

3760.559 -> querying by but not to worry

3762.72 -> and so what we want to do now is go back

3764.559 -> to the graphql explorer and let's um

3767.44 -> construct

3768.48 -> a query

3770.079 -> where we are searching for one memory by

3772.319 -> its slug

3774.079 -> okay so

3775.359 -> what we really need to do is just on

3776.64 -> line two we can add a where oh okay yeah

3779.44 -> you're gonna add a new one okay fine

3782.16 -> love it

3784.24 -> and then we can go with

3787.039 -> memory

3788.559 -> and then we can get uh the

3791.76 -> title slug

3794 -> youtube and description

3796.4 -> and then a nice thing about this

3797.52 -> explorer is it lets you choose the one

3798.96 -> that you want to run

3800.319 -> so we can get that but there is no id

3802.559 -> right so that means we need to pass in

3804.559 -> an id or

3805.92 -> slug well we're going to be querying it

3807.68 -> by the slug

3809.039 -> so you just do where slug equals

3810.72 -> whatever

3811.76 -> although i've never done it like this so

3813.44 -> you're going rogue but that's fine

3815.599 -> oh maybe you can't

3817.28 -> because i query i think you have to

3818.559 -> query a collection where the slug is

3821.039 -> whatever okay well then i'm gonna copy

3823.2 -> it like this

3824.48 -> and we're going to do it the way that

3825.68 -> you were telling me to do it and i'm

3827.44 -> just going to

3829.2 -> wear slug

3832.079 -> and then if you find a slug from the

3834 -> front end uh you could then we'll just

3836.079 -> test that one of them works

3842.319 -> and then we can just use that query

3843.599 -> again

3847.28 -> there we go

3849.44 -> okay sweet

3851.039 -> okay so let's copy that query and then

3854.4 -> we'll put that in to get static props

3856.16 -> with just a an interpolated string in

3859.039 -> the query which is memory

3863.92 -> and again we have to copy and paste all

3865.28 -> that fetch but that's okay because we're

3867.44 -> building first and engineering later

3869.839 -> right oh i like that it's good phrasing

3873.2 -> um okay so we're going to go with this

3877.68 -> all right and then i will show you

3880.48 -> a trick that i like which is

3883.28 -> to take this

3885.52 -> here

3886.559 -> and then i can

3889.119 -> drop this in

3891.2 -> okay now what i want to do is i actually

3893.359 -> just want to use graphql variables so we

3895.44 -> can do oh yes

3897.2 -> and the slug type we'll look up real

3899.76 -> quick

3900.96 -> is

3902.24 -> a string

3904 -> and then

3906 -> the the bang means it's required isn't

3908.4 -> it

3909.44 -> as well yeah so this is saying that you

3911.68 -> have to provide a slug and the slug is a

3914.079 -> type of string and if you don't provide

3915.599 -> one it'll have an error and then we get

3917.68 -> to use that here and then below

3921.359 -> i can provide

3923.039 -> slug of memory

3926 -> beautiful and this is more secure i only

3927.92 -> actually recently recently learned about

3929.52 -> this in the last couple of months and

3930.799 -> i've got a big branch on my blog where

3932.96 -> i'm refactoring all of my graphql

3934.799 -> queries to use these variables properly

3936.96 -> to sanitize my queries and

3939.839 -> a blog post is coming up about this by

3941.839 -> the way it's big work in progress it's a

3943.52 -> huge project to refactor but i'm glad

3945.44 -> you brought this up

3947.2 -> okay so i'm gonna do memory data and

3950.079 -> that's going to be data dot memory

3952.48 -> collection

3954 -> dot items

3956.24 -> zero

3957.359 -> zero

3958.88 -> and we know it we're only asking for one

3960.319 -> oh you might want to put a limit one as

3962.64 -> well just just to show the the

3965.76 -> what you would normally do when you're

3966.96 -> searching you only want one memory don't

3969.039 -> you and where you find you there might

3971.28 -> be a case where you have identical slugs

3973.44 -> but you we wouldn't

3975.839 -> we i mean we hope not but we hope not

3978.559 -> but every time you say that it

3979.76 -> definitely won't happen it definitely

3981.359 -> will so yeah um if i run it like that

3985.359 -> that's what we want okay so there's our

3987.359 -> limit of one and like you the formatting

3989.359 -> on these doesn't matter so we can make

3990.799 -> this a little bit less unpleasant to

3992.559 -> look at

3993.52 -> and now we can kind of see what's going

3995.039 -> on so we got a limit of one i

3997.52 -> destructured down to memory data and so

4000.16 -> then i'm going to just

4002.96 -> say memory

4004.559 -> memory data

4006.88 -> so then up here

4009.44 -> we should get the memory

4012.4 -> and we can do

4013.92 -> everybody's favorite debugging trick

4019.68 -> and this is great because we're building

4021.2 -> four pages at once with just with just

4024.24 -> one one block of code and it's just i i

4027.359 -> still find it magic and this is why i

4028.96 -> love doing what i do because it's just

4031.359 -> look at that

4032.799 -> beauty all right all right

4035.76 -> so and let's get this video and now

4037.52 -> here's the cool part right because we

4038.88 -> we're so here's the one we're at

4040.72 -> click through let's go to single page

4042.4 -> apps we're on the web there it is okay

4044.24 -> now we've got another one back through

4046.4 -> like all the data is coming in and we we

4048.559 -> had as you said like

4050.559 -> we didn't write a lot of code here this

4052.72 -> this is largely boilerplate so it's like

4055.68 -> get this query pull out the variable and

4058.079 -> then just return the thing it it's not a

4061.039 -> ton of code outside of this this

4062.64 -> boilerplate for sending a request

4064.799 -> um

4066.16 -> that's that feels really powerful that's

4067.92 -> that's nice and usually if you like you

4070.48 -> were talking about if you'd abstract

4071.68 -> that out it would just be three lines of

4073.119 -> code to create that whole page from that

4075.52 -> query you know you'd move the query

4077.119 -> somewhere else and it would just it

4078.319 -> would look so nice and clean and not

4080.48 -> scary as well this is why this is great

4082.48 -> for beginners because if you if you just

4084.72 -> put your fetch

4086.16 -> function in one place you just reuse it

4088 -> all the time pass in a query it's just

4090.319 -> so nice yeah it's so nice

4092.799 -> uh alan is asking in the chat if uh if

4095.359 -> you understand correctly there are a few

4097.44 -> thousand pages on your site you can

4098.64 -> build on netlify without having to

4099.92 -> generate them all at build time yes so

4102.56 -> next is setup where you can send it any

4104.799 -> number of static paths so like

4107.6 -> you know you could use that limit that

4109.279 -> uh that we just saw to set it to say the

4112.159 -> first

4113.44 -> 500 pages or the first 100 pages or

4116.239 -> whatever and then you could use that

4118 -> fallback true

4119.759 -> to run

4121.359 -> to basically load the data

4124 -> at runtime um

4126.159 -> and that would be rendered in a

4127.199 -> serverless function on nullify so that

4129.44 -> is uh that's how that works

4134.96 -> in a large scale business or application

4136.48 -> you'd normally have your data team

4137.839 -> working on like the top pages that

4139.44 -> people visit

4140.719 -> and these are the ones you should

4141.759 -> prioritize and you probably get those

4143.52 -> from a database somewhere to build those

4145.679 -> top pages which might change every build

4147.679 -> as well i could do some really clever

4149.679 -> stuff i think with optimizing the

4151.199 -> experience for speed based on how your

4153.44 -> visitors use your site

4156.64 -> yeah

4157.679 -> so why don't we

4159.359 -> actually get this thing to do

4161.759 -> stuff so now that we've got data i'm

4163.52 -> gonna collapse these down

4165.199 -> and um

4167.839 -> we have

4169.839 -> let's see if i set up like a div can i

4172.4 -> just reuse the container out of this one

4174.799 -> or does that oh yeah good idea i'm just

4176.56 -> gonna do that thing like you need your

4178.239 -> next head as well

4180.48 -> for that sweet sweet seo

4182.719 -> stuff uh yeah good good and we probably

4185.679 -> need a link to home as well so why don't

4187.04 -> we just bring all this over yes good

4188.56 -> idea okay so then we're gonna wrap this

4192.239 -> all in a div

4193.759 -> with a class of container

4198.4 -> alan's asking does that also mean it's

4200 -> possible to update the content without

4201.6 -> redeploying the site yes so you can use

4204.4 -> uh contentful to trigger web hooks to

4206.719 -> rebuild sites on on netlify etc and when

4210.159 -> you change content but you also don't

4212.4 -> have to do that

4214.56 -> and you can run periodic builds if you

4217.6 -> want via automation or anything like

4220.32 -> that or

4221.6 -> you can even use one of my favorite

4222.96 -> things

4224.239 -> which is um incremental static

4226.48 -> regeneration which on a page level

4229.44 -> if you uh use the revalidate parameter

4232.64 -> you can choose to

4234.48 -> next to validate the the staleness of

4237.04 -> your data at certain periods after users

4239.12 -> visit your site and if the data is

4241.76 -> changed next in the background will

4244.239 -> rebuild that page only and not the whole

4246.8 -> site again more environmentally friendly

4248.96 -> rather than um building the whole site

4251.28 -> every time someone changes an entry and

4253.679 -> you you're building thousands and

4255.12 -> thousands of pages so flexible so

4257.52 -> beautiful i love seeing it in action it

4259.44 -> still makes me cry with joy

4263.76 -> okay and then um for the

4266.8 -> for this part we're not gonna parse that

4269.28 -> mark down because i don't think we have

4270.64 -> enough time to yeah unless you've got a

4273.199 -> fast version i mean no i mean react mark

4276.159 -> down is what i would have suggested but

4277.52 -> it's still a faff so we'll just go with

4280 -> all right we'll just we will be meta dev

4282.48 -> cool everyone can read mark down

4284.56 -> in this chat

4288.4 -> so we'll set up the title to be

4289.76 -> memory.title

4294.88 -> and then the description can be in the

4296.48 -> description as well oh yeah yeah we can

4298.8 -> definitely do that so it's uh meta

4302.8 -> name

4305.12 -> descrip is it name description

4308.32 -> yes content equals the thing

4312.8 -> memory description

4315.76 -> oops

4318.08 -> okay

4318.88 -> and then finally down here we will add a

4321.52 -> link

4322.96 -> and we'll just send everybody back home

4324.96 -> and say

4335.12 -> okay html entities

4338.239 -> i know

4339.36 -> i feel like this is one of those things

4340.719 -> that that like dates me as a as a

4342.56 -> developer is that i have some of the

4344 -> html entities memorized

4346.32 -> that's one of my favorites actually i do

4348.4 -> enjoy that arrow

4350.159 -> um

4353.56 -> [Music]

4360.96 -> are you watching now

4362.4 -> welcome back

4363.679 -> i hope you are enjoying the conference

4365.44 -> and having fun

4367.12 -> hey kenny it's time to

4369.679 -> announce our next winner for the

4372.719 -> community creator category so we're just

4375.199 -> going to relive this whole moment for

4376.48 -> you we're all nominated and voted for

4379.199 -> creating amazing jobs content for the

4381.28 -> community that's pretty much it they are

4383.52 -> doing incredible work putting out

4385.199 -> content resources blog posts video

4388 -> tutorials

4389.36 -> twitch streams you name it and the

4391.92 -> community appreciates them for doing all

4394.08 -> of this and making content that we all

4396 -> learn from

4397.36 -> without further ado the

4400 -> six

4401.52 -> i think it's five the top five finalists

4404.4 -> who made it to this category are

4407.04 -> stephanie eckles salma alan naylor

4411.199 -> alex trust

4412.64 -> marcelo lewin

4414.159 -> and benedict ray

4416.08 -> thank you all for voting for all these

4418.08 -> amazing amazing individuals that is a

4420.159 -> formidable crew to be up against i know

4423.84 -> the person with the highest number of

4425.84 -> votes in this category

4428 -> is

4429.92 -> wait for it

4435.679 -> oh

4436.56 -> my gosh

4437.68 -> [Laughter]

4444.56 -> can we get a b in the chat for

4447.01 -> [Laughter]

4450.719 -> speak

4452.48 -> be in chat but look y'all we did it

4455.44 -> like this this is a this is an app being

4458.159 -> fully rendered we had to write

4460.64 -> surprisingly little code for for how

4462.88 -> much this allows us to do and then if we

4465.36 -> add more like let's let's just add

4467.36 -> another one

4468.56 -> um

4469.679 -> let's just yeah let's just i don't know

4471.36 -> here's yeah cassie cassie's real sports

4473.92 -> are auto racing bullfighting and so

4476 -> we're going to

4479.36 -> come over to content

4481.6 -> and we're gonna add a memory

4486.4 -> there's cassie

4489.44 -> we'll share

4491.44 -> get the embed url

4507.28 -> i thought you said cassidy as well and

4509.199 -> cassidy's ears

4510.64 -> peaked

4511.06 -> [Laughter]

4513.84 -> no cassidy is the worst cassie

4516.6 -> [Laughter]

4519.76 -> but look look it did it look at that

4523.52 -> we didn't have to write any more code so

4525.199 -> this is really flexible this is really

4527.04 -> nice like i

4528.3 -> [Laughter]

4532 -> uh

4532.8 -> wonderful um but you know it's like this

4535.12 -> is a really really nice way to work

4536.88 -> because it's it's one of those things

4538.96 -> where you you set up the structure and

4541.44 -> then the machine continues to work you

4543.52 -> don't have to

4544.96 -> you know the the content team doesn't

4546.64 -> have to ping the web team every time

4548.08 -> something changes it's the content team

4550.159 -> is now free they edit things on

4551.92 -> contentful and the site just works

4555.52 -> um it's glorious

4557.76 -> should we

4558.8 -> let's

4559.76 -> let's deploy this i think you need to

4561.28 -> add um in the header some kind of you

4563.52 -> need to add adder like a some branding

4565.84 -> maybe like the slap bracelet or

4567.6 -> something like that

4570.8 -> i can't wait to get my slap bracelet

4574.239 -> i am really excited about that slap

4576.08 -> bracelet let me pull up uh i think i

4578.4 -> have

4579.679 -> the file here somewhere where i can just

4581.28 -> grab it

4585.92 -> here's the

4587.07 -> [Music]

4590.719 -> i'll just pull this over this is our

4592.56 -> this is our

4593.6 -> massive figma file for like all of the

4596.08 -> jams oh this is insider this is like

4599.44 -> behind

4600.56 -> yeah be in chat for that you can see the

4603.12 -> incredible amount of work that went into

4605.199 -> this like so many assets got created

4608.64 -> um

4609.52 -> hello

4610.56 -> come on you can do it

4613.76 -> i want to live in jams that conf world

4617.36 -> i want to live

4618.8 -> in that

4620.88 -> space time

4622.64 -> continuum

4624.239 -> so much fun with this

4625.84 -> um all right let me export one of these

4628.32 -> you've got the actual bracelet

4630.719 -> yeah this is the bracelet that you can

4632 -> get it's an actual slap bracelet

4634.08 -> um and so who even makes them how did

4636.64 -> you find a supply of us

4639.52 -> so here's the thing we we work with uh

4642.4 -> with someone named ashlynn and ashlynn

4645.36 -> is

4646.48 -> like

4647.92 -> you know you know when you watch movies

4650 -> about like

4651.36 -> the mafia or like gangland bosses and

4654.4 -> there's always like the boss and then

4655.92 -> there's that person who's just their

4657.28 -> fixer like no matter what you need that

4660.08 -> oh yeah got it i'm on it ashlyn is a

4662.32 -> fixer so we just made a joke

4665.92 -> and said wouldn't it be really funny if

4667.76 -> our swag was a slap bracelet and like

4669.44 -> two hours later she's like i got prices

4671.04 -> in a supplier let's make this happen

4674.8 -> yeah winston wolfe in real life winston

4676.8 -> wolf from uh that's pulp fiction right

4680 -> uh but yeah uh it it is it is magical to

4683.12 -> have someone like ashlynn in your life i

4685.04 -> recommend everybody gets in ashland uh

4688.4 -> okay so let's let's stick this up at the

4690.08 -> top which means we need we need a common

4693.12 -> layout which i'm going to do that in the

4695.12 -> app is that right

4697.52 -> yeah you wouldn't normally do it in the

4698.8 -> app but you could do it in the app

4701.44 -> i guess theoretically i can do whatever

4703.12 -> i want maybe create a component create a

4705.12 -> component that is the header which is

4707.679 -> the svg and something and then you can

4709.52 -> just add that component to both pages

4711.44 -> okay so i'm going to create a new file

4714.4 -> component header

4717.12 -> and in here

4720.56 -> hello

4721.92 -> uh-oh

4723.6 -> we've locked up everyone

4725.52 -> oh

4726.32 -> what happened what did you do it's a

4728 -> slap bracelet is too powerful

4730.8 -> uh maybe this will help i closed sigma

4735.04 -> keep waiting

4736.96 -> too much memory

4742.4 -> come on

4743.92 -> maybe i should have reopened it

4746.64 -> oh no this is tense okay let's reopen

4752.239 -> there we go okay uh back to my component

4755.36 -> header and we're gonna export default

4757.84 -> component

4759.04 -> header nope function

4760.8 -> function header

4762.8 -> and it is going to return

4765.679 -> we'll do a header and inside the header

4768.4 -> we can have

4769.76 -> an image with the source of

4772 -> where do i put this

4774.08 -> public public

4778.48 -> and let's rename that to something a

4780.159 -> little more web friendly

4783.6 -> okay

4785.28 -> and so i'm going to

4787.28 -> just go right to slap bracelet

4797.92 -> slap bracelet

4801.36 -> all right and that'll be

4803.44 -> that's and that kind of works um so

4806.08 -> let's bring that in

4811.12 -> i see you also have a special order for

4813.44 -> your imports

4815.76 -> i

4816.48 -> yes i do me too

4819.44 -> i can't i can't not do it

4823.76 -> okay so we can put that in here

4826.639 -> and then if i copy let's see

4829.84 -> copy here fun fact on html or jason put

4832.88 -> the header outside of the main which is

4834.8 -> correct because the uh the uh content

4838.239 -> inside the main shouldn't be repeated

4839.76 -> across pages and the header is going to

4841.199 -> be repeated across pages and i just

4843.679 -> retouched it

4844.88 -> we

4848.48 -> wrap this all in a main i got confused

4850.32 -> by that div wrapper

4853.36 -> okay so if we do that and that

4855.92 -> that should give us

4864 -> it's because you are the ones in because

4865.199 -> one of them's in a div and one of them

4866.4 -> is not in a div

4868.56 -> so if you wrap it in a fragment rather

4870.239 -> than a div you should be fine or wrap

4872.159 -> the other one in a div

4874.48 -> oh it's the way your index compared to

4876.239 -> your memory pages are different

4879.12 -> i believe

4881.6 -> index

4883.12 -> oh you've got a class equals container

4884.48 -> on that one and not the other one

4886.639 -> and

4887.44 -> this one

4890.48 -> oh you have got it interesting

4893.52 -> why are you different oh is it because

4895.92 -> it looked like it was gritty

4898.48 -> let's um

4901.28 -> let's see what happens here so i've got

4902.719 -> this one

4904.4 -> and i've got that one

4906.159 -> oh do you know what it is there's um

4907.76 -> there's a there's a flex thing on the

4910.239 -> main container thing that stretches it

4911.92 -> out

4912.639 -> in the css

4914.88 -> take that styles.main off and you'll be

4916.48 -> fine

4918.159 -> or put it on there

4924.4 -> and

4926.48 -> it's just something that comes default

4927.84 -> with next js

4930.96 -> it's frozen on me

4932.56 -> come on now

4933.76 -> too much power

4936.48 -> we over did it the slot bracelet was

4938 -> once one step too far

4942.32 -> okay there we go so now we've got a nice

4943.92 -> consistent feel

4945.44 -> we've got uh we've got our jam stack

4947.44 -> memories

4949.12 -> we've got that and i think we can just

4950.8 -> go ahead and deploy this thing just

4952.239 -> deploy it on the cli and then look at

4954.159 -> that in like an hour

4956.96 -> we've set up

4958.4 -> everything in contentful we've added

4959.679 -> some entries we've just written a few

4961.199 -> graphql queries a few lines of code and

4963.199 -> we've got a whole website

4966.239 -> that actually is meaningful and it's not

4968.32 -> just like a test a test

4970.56 -> it's real real memories

4973.52 -> so i just uh ran the netify open command

4976 -> which will pop this open in the browser

4977.679 -> so we can watch this thing build so we

4979.44 -> pushed to github and that's what kicked

4981.199 -> off the build

4982.32 -> and so we don't actually have to we

4983.52 -> don't invert this is just so we can

4984.88 -> watch we don't even need to watch it'll

4986.239 -> just happen

4987.36 -> um

4988.48 -> but the site is currently let's open

4991.36 -> this up

4992.8 -> here and so this is the like the site

4995.12 -> that's been published so as it's

4996.96 -> building

5000.159 -> we'll see all this stuff happen here it

5001.84 -> goes

5003.6 -> generating static pages

5007.04 -> yep

5008 -> packaging up

5010.88 -> i love to watch logs to comfort me i

5014.4 -> like to see what's happening and i like

5016.56 -> to see all of my hard work come to

5018.4 -> fruition

5019.6 -> and

5020.4 -> my pipelines do what they need i love it

5023.76 -> i just can be a scary thing though when

5025.44 -> you're first starting out logs can be

5026.8 -> scary because there's so many numbers

5028.4 -> and letters and all sorts of nonsense i

5030.88 -> think they're good to get used to

5033.28 -> all all nonsense

5035.36 -> yeah i mean it's it really is kind of

5037.12 -> great to just be able to to

5041.36 -> see the robots do the work like you know

5043.76 -> to too much of it feels a little oh

5045.679 -> let's go into a dark room and see what

5047.199 -> happens um but now that's that's done

5050.08 -> and here are the

5051.6 -> the sparkles your site is now live that

5053.92 -> is live

5055.12 -> and if we reload this

5060.239 -> be in chat

5063.52 -> and you can go visit that right now we

5065.04 -> did it

5066.32 -> put that in chat

5069.44 -> uh yeah i mean this is

5071.6 -> it's very nice very nice

5073.6 -> okay so

5075.92 -> i feel like this is a success we we set

5078 -> out to

5080.56 -> model some content in

5082.48 -> in contentful use the graphql api store

5085.12 -> some of our favorite memories from jam

5086.48 -> stack conf which if you haven't seen jam

5089.44 -> stack conf yet actually you know what

5091.36 -> i'm not going to show you that i'm going

5092.719 -> to show you this because this is

5095.199 -> i'm so proud

5097.04 -> of what we were able to do here um

5100.88 -> where is it where is it

5104.96 -> we got to make

5108.159 -> this video

5109.6 -> okay everybody go look at this and i'm

5111.679 -> going to make you watch this with

5113.199 -> somebody

5115.28 -> i want to dance with somebody

5118.719 -> i want to feel the heat

5120.639 -> i'm nothing

5121.84 -> have you uploaded the jam stack comp

5123.199 -> videos yet yeah that's what i was doing

5125.04 -> right now yeah yeah they're uploaded

5126.8 -> then that means you can watch them right

5128.32 -> now you should go do that

5131.52 -> so anyways go watch those videos go go

5133.6 -> check that stuff out

5136 -> you don't have to watch it on repeat but

5137.92 -> uh

5139.679 -> so

5140.639 -> where should people go if they want to

5143.04 -> go further here what are what are next

5144.8 -> steps

5145.679 -> if you want to learn more about

5146.8 -> contentful you can go to contentful.com

5150 -> developers which is our developer portal

5152.88 -> we've got links to tutorials

5154.639 -> documentation

5156.239 -> video courses

5158.08 -> all free stuff and we're actually

5161.28 -> expanding out this in the next few

5163.52 -> months to

5164.639 -> really showcase what the community is

5166.08 -> building with contentful as well to show

5168.32 -> more and more starters and more and more

5169.679 -> example projects because the beauty of

5171.04 -> contentful is that it's completely

5172.88 -> language and framework agnostic anything

5175.76 -> that can make an http connection can use

5178.56 -> content for so go and build stuff with

5180.639 -> contentful for your smart fridges and

5182.32 -> your smart watches and billboards and

5184.159 -> buses and everything it's not just for

5185.92 -> websites which is cool

5187.679 -> um

5188.639 -> and then uh you can join our slack as

5190.8 -> well if you use contentful if you have

5192.159 -> any problems you can go to contempo.com

5194.4 -> slack

5195.52 -> and um go and have a play with next js

5198.96 -> and uh the docs i love the lecture

5201.04 -> stocks

5202.48 -> docs are a really hard thing to get

5204.239 -> right and i always have um a good time

5207.199 -> on the next js docs because you can

5208.719 -> search for exactly what you're looking

5210.08 -> for

5210.88 -> and um

5212.239 -> it's a really nice search it's a really

5213.76 -> nice experience and they take you

5214.8 -> through a little story there's a really

5216.08 -> good um

5217.6 -> based tutorial of getting started on the

5219.6 -> next js docs as well

5221.6 -> um and they also provide um an x-ray

5224.08 -> starter for the contentful cms

5226.88 -> i've also got an xjs startup which is

5229.36 -> slightly

5230.32 -> more engineered than the next js one as

5233.76 -> well if you wanted something like that

5236 -> and um

5237.28 -> just come and watch my streams and watch

5239.52 -> me build stuff and learn things with

5240.96 -> next js and contentful as well

5243.199 -> yes another shout out

5246.08 -> make sure you go and uh you know smash

5248.32 -> that subscribe button ring that bell

5250.48 -> um is this the one you're talking about

5252.639 -> yes that's the one

5254.48 -> all right everybody uh why don't you go

5256.56 -> ahead one more time give us a b in chat

5258.4 -> thank you so much for hanging out with

5260.48 -> us i am gonna do a quick run through of

5263.28 -> all the things that are good about this

5265.28 -> stream thanks to other people so first

5267.36 -> and foremost jordan has been here all

5269.28 -> day doing the live captioning uh here

5271.679 -> from white co-captioning which is very

5273.679 -> very helpful and and means a lot and

5275.76 -> that's made possible through the support

5277.28 -> of our sponsors netlify fauna auth0 and

5280.639 -> for the last time asura so thank you all

5283.36 -> so much for kicking in to make this show

5284.8 -> a little bit more accessible it means a

5286.239 -> lot to me and just one more reminder if

5288.159 -> your company's looking to sponsor

5289.36 -> streams maybe uh give me a comment give

5291.44 -> me a little call um okay

5293.6 -> that is uh is is about it for today make

5296.4 -> sure you please go and look at the

5297.679 -> schedule there are so

5299.199 -> so many amazing people

5301.04 -> coming up very soon to do incredible

5303.679 -> things just go scroll through this and

5306.159 -> be amazed at how awesome these people

5308.08 -> are and uh and how lucky i am to get to

5310.48 -> learn from them

5312.639 -> boy panthers thank you so much for

5313.76 -> hanging out with us today um any parting

5315.76 -> words before we call this one done

5318 -> as ever build stuff learn things love

5320.159 -> what you do

5322 -> and have a great day

5324 -> all right y'all we're going to go find

5325.199 -> somebody to raid thank you so much we

5327.28 -> will see you next time

Source: https://www.youtube.com/watch?v=OWgeN6O707s