Trecia Kat: Why I chose Next.js for my Strapi application

Aug 15, 2023

Trecia Kat: Why I chose Next.js for my Strapi application

Discover why Trecia Kat, Developer Advocate Intern at Strapi, chose Next.js as the frontend framework for her job board Strapi application.

See Next.js and Vercel in action: https://vercel.com/home

Content

9.42 -> Let me ask you a question.

11.67 -> How long does it take you to choose a font for your website?

16.56 -> I'll give you a few moments to think about it.

19.71 -> I hope I answer for everybody when I say

22.35 -> it does take us quite some time,

25.23 -> because let's face it,

26.79 -> there are so many fonts,

28.29 -> so many resources to use and to choose from.

32.49 -> But we do know,

33.87 -> at the end of the day,

35.7 -> as many as these fonts can be,

38.76 -> each one of those fonts

40.98 -> has its own use case and its own purpose.

44.55 -> And that is the same with front end frameworks today.

48.99 -> When making a decision on which text tech you want to use

52.32 -> to build an application,

54.72 -> it does take us some time

56.52 -> because we have to make a lot of decisions

59.4 -> around which back end, which front end,

62.16 -> which database we want to use

64.05 -> building that application.

66.72 -> Just thinking a few years ago,

68.4 -> jQuery was the most popular framework for JavaScript,

72.18 -> and now, we have so many more.

75.51 -> We have React, we have Vue,

77.64 -> we have Angular,

78.48 -> and so many that I cannot list at the moment.

81.69 -> The point is,

82.92 -> there are just so many of them,

85.26 -> and it does make decision making quite difficult.

90.09 -> But one method I like to use

92.1 -> to be able to help me on making a decision

96.84 -> is defining my current problem.

100.74 -> What problem am I currently experiencing

104.52 -> that can help me look into that framework

108.15 -> that can help solve those problems?

111.09 -> After all, as many as they can be,

114.81 -> these frameworks are not made

116.94 -> to solve the same problem.

119.34 -> And so what problem was I facing

121.92 -> when building this application?

124.17 -> Or rather, what was I looking for

126.69 -> in that framework that I want to use?

130.17 -> The first thing is deployment.

132.78 -> Now, I don't personally like deploying my own applications

137.37 -> because I find it so challenging sometimes,

140.7 -> you know, configuring all those environment variables,

144.42 -> and it's just a process that I personally don't like to do.

150.24 -> And so it would be nice to have an application

154.05 -> that is easy to deploy.

156.54 -> So a front end framework that is easy to deploy

159.75 -> is one thing I am looking for.

163.26 -> And the second thing is simple learning curve.

165.66 -> Now, does this framework require me to know

168.63 -> a prerequisite language

170.19 -> before I could actually build something with it?

173.37 -> Like you can't use React if you don't know JavaScript,

178.2 -> or you can't use Next.js

180.18 -> if you don't know Vue.

181.56 -> That kind of a thing.

182.52 -> So am I going to have to know a prerequisite language

186 -> before I could use this framework?

189.27 -> And the third and final thing

190.62 -> is integration with Strapi.

193.29 -> Now, does this framework integrate with Strapi?

197.22 -> We don't know.

198.84 -> But the purpose of this application I am building

202.68 -> is not to learn the framework itself,

205.71 -> but to familiarize myself with Strapi,

208.68 -> and to find a framework

210.18 -> that will help me quickly build

212.07 -> the front end of my application.

214.71 -> And so this is the application I built.

218.19 -> As you can see,

219.39 -> the Simple Job Board,

220.95 -> as simplest as it can be.

223.14 -> It does not have a lot of functionalities or features.

226.83 -> The point of this application was to learn Strapi

231.24 -> and to build something with it.

233.4 -> And so I was looking for a front end framework

236.01 -> that's going to help the build the front end

238.17 -> of my application

239.46 -> and successfully fetch data from Strapi's RASP API.

244.02 -> And so all those problems that I defined,

247.23 -> all those wants that I defined as well,

250.2 -> led me into choosing Next.js as my framework.

255.36 -> And so why Next.js?

257.91 -> To be honest, it's all because of Twitter.

262.32 -> Okay, so I am someone who's mostly active on Twitter.

266.46 -> Twitter's my main social media platform.

268.89 -> And so seeing tweets like these,

272.07 -> seeing tweets of people posting

274.56 -> amazing things about Next.js,

277.32 -> sharing praise of how amazing building an application

281.7 -> with Next.js is,

282.9 -> how amazing Next.js with Tailwind CSS is,

287.88 -> and, you know, once you go Next, you never go back,

291.18 -> I mean, come on.

292.17 -> Those tweets, they just fueled my excitement

295.98 -> of wanting to build a Next.js application.

300.24 -> And so I gave into that.

302.79 -> But otherwise, apart from the tweets themselves,

306.75 -> what solutions does Next.js offer for my application?

311.61 -> The first one being,

312.96 -> deployment on Vercel.

315.36 -> Now, deploying on Vercel,

318.06 -> that is an amazing thing.

319.62 -> For me, personally,

320.94 -> the user experience is just smooth, simple,

324.57 -> and it requires less effort from my side,

327.27 -> which is something I absolutely love

329.64 -> because I just don't like to do a lot of things

332.97 -> to deploy an application.

334.47 -> And Vercel has solved that problem.

337.95 -> All I had to do was to connect

340.5 -> my GitHub repository to Vercel,

343.137 -> and Vercel took care of the rest.

345.51 -> And so I absolutely love deploying

348.63 -> my Next application on Vercel.

351.24 -> It is just as easy as that.

354.09 -> And the second thing is Strapi does integrate with Next.js.

359.55 -> I mean, it should since Strapi is built on React.

364.32 -> And so Next.js and Strapi integration

368.16 -> was just as smooth

370.53 -> But what other things affected me

373.38 -> or influenced me into choosing Next.js?

376.68 -> Or rather, what else make me love Next.js more?

383.19 -> First thing is, easy learning curve.

385.29 -> Now, when I learn a new framework

387.81 -> or a new tool,

389.01 -> it does take me some time.

390.63 -> From two weeks, a month, three months,

393.15 -> to be actually familiar,

395.16 -> and to build an application.

397.05 -> And so when I was learning Next.js,

399.33 -> I did not expect that I would be learning it

403.17 -> for less than a week,

404.46 -> and be able to build an application

407.49 -> within two, three days.

409.2 -> And so Next.js is quite easy for me to learn,

413.85 -> and also because I have React knowledge.

417.3 -> And so when you have basic React knowledge,

420 -> you don't have to be a master,

421.26 -> I am not a React master.

423.78 -> And so that's what I absolutely love,

426.57 -> that you don't have to be 100% React know it at all.

431.76 -> You just have to know basic React features,

437.19 -> and you're ready to go.

438.81 -> And so when learning Next.js,

441.417 -> all you really have to know is functional components,

444.57 -> JSX, and ES6 features, modules, destructuring,

451.347 -> and all that stuff.

452.52 -> And you are set to build an application with Next.js.

457.35 -> And so I love Next.js because it is easy to learn,

461.25 -> and you don't have to be a React master

463.74 -> to be able to build an application with it.

467.52 -> And the second thing is SEO.

470.46 -> Now, when you look into the browser and you inspect,

475.83 -> now, this is the Next screenshot

481.229 -> and this is the React screenshot.

483.93 -> So the differences between these two

486.87 -> is that with Next.js,

489.15 -> when you inspect your application,

491.01 -> so this is my Home page,

493.38 -> it actually returns HTML pages in your browser.

498.75 -> And that is amazing for SEO alone.

502.02 -> And I absolutely love that

504.9 -> Next does return HTML pages on your browser.

508.68 -> Unlike with React,

510.54 -> it only returns JavaScript code,

513.48 -> and that doesn't really tell the browser much

516.99 -> about what your page contains.

519.39 -> And so Next.js is really amazing

521.61 -> when it comes to SEO.

523.35 -> And also to mention,

524.97 -> that you are able to import and use the head component

530.7 -> on each of your Next.js applications,

534.57 -> sorry, on each of your pages.

537.09 -> And you can actually set the metadata, the title,

542.52 -> for each of your individual pages

544.47 -> on your Next application,

546.15 -> which I think is amazing.

547.65 -> And it does well when boosting SEO for your app.

552.03 -> And so Next.js, with SEO,

555.63 -> is really amazing.

558.27 -> And before I talk about my third and final reason

562.14 -> why I absolutely love Next.js,

564.99 -> I want to quickly mention what Strapi is,

567.45 -> because I've been speaking about it

569.16 -> and never really introduced it.

571.08 -> And so Strapi is the leading open-source headless CMS,

574.65 -> which is 100% built on JavaScript.

577.68 -> You can fully customize your application,

581.37 -> and is a developer-first.

583.32 -> And so if you're looking for a software

585.27 -> to help you build fast, secure,

588.18 -> and powerful APIs,

589.322 -> strapi.io is for you.

592.2 -> And to quickly mention some few features

594.12 -> that Strapi possesses is,

596.58 -> number one, it's open-source,

598.23 -> so a lot of people are contributing

600.33 -> to our code base.

602.16 -> And we always update our Strapi versions

607.56 -> to make sure that all the bugs are fixed,

610.98 -> and to deliver amazing user experience.

615.03 -> And so it is open-source,

616.53 -> and you can also join our communities as well.

619.35 -> We have a large and active community,

623.01 -> in which you will find help and assistance

625.8 -> if you do need it.

627.03 -> And so that is the first reason.

629.7 -> And the second feature is it's highly customizable.

634.35 -> So if you want to get a feel

636.63 -> of your Strapi application,

639.12 -> you can customize it,

641.07 -> whether it be custom controllers,

644.04 -> whether it be middlewares,

646.35 -> you can take control over your Strapi application

651.09 -> and customize it through your own liking.

655.11 -> And the third one is,

657 -> REST or GraphQL.

659.07 -> Now, you can consume the API from any,

662.733 -> sorry, you can consume the API from any client

666.36 -> using REST or GraphQL.

668.25 -> And I think that's one of the things

669.78 -> that make us a unique headless CMS.

674.19 -> The fourth one is that Strapi is self hosted,

677.64 -> so you have control over your data

680.52 -> and your costs at all times.

683.46 -> And so I just wanted to give you

684.96 -> a few introductions on what Strapi is,

688.92 -> and yeah, do go headless with Strapi,

692.76 -> And spend less time on back end,

694.89 -> and more time on content creation.

699.18 -> And coming to the final reason

702.12 -> of why I absolutely love Next.js,

705.18 -> it all comes down to data fetching.

708.27 -> Now, data fetching with Next.js is awesome

711.42 -> because it does offer you multiple ways

713.85 -> in which you can choose on how you want to fetch data.

717.87 -> Those ways can be pre-rendering

719.97 -> static site generation, service-side rendering,

723.21 -> and, okay, that one, I seem to have forgotten it.

727.02 -> But I'll be focusing on two methods here today

730.41 -> that I've used on my application,

732.21 -> which is on the left,

734.25 -> static site generation.

735.96 -> Now, with the static site generation,

737.97 -> the pages are pre-rendered into HTML

741.72 -> on the server at build time.

744.9 -> And so I use the getStaticPaths

750.54 -> to fetch data on the API containing my Home page content.

755.16 -> And the reason that is so

757.11 -> is because the getStaticPaths is great to use

761.46 -> if you're fetching data from an API

764.49 -> that does not regularly change such as the Home page.

768.6 -> And that is a great use case.

771.12 -> And the second method here we have

773.16 -> is server-side rendering

775.14 -> on your right.

777.18 -> And with this one, the pages are pre-rendered into HTML

783.84 -> on the server on every request.

786.99 -> And so it is great to use the getServerSideProps

791.85 -> if you're fetching data from an API

793.83 -> that is constantly getting updated,

796.89 -> such as with my use case, the jobs.

800.19 -> Jobs are aways, you know, going in, going out,

803.76 -> being updated, created, removed.

806.16 -> And so the great use case here

808.32 -> is using the getServerSideProps on fetching data

815.43 -> that is regularly updated.

818.97 -> And using these methods are also amazing

822.87 -> at optimizing the performance of your application.

826.32 -> And that's what I really love about Next.js.

830.61 -> And that's basically my reason

835.77 -> of why I think Next.js is great.

840.42 -> And to also mention,

842.34 -> there are other features

844.2 -> that I have not yet come to use,

846.48 -> but I saw that Next.js

847.86 -> does have support for TypeScript,

850.26 -> and well, yes, API route,

852.09 -> I have to use that one as well.

853.89 -> And it is fast, really fast refresh feature, is amazing.

859.5 -> Otherwise, do I think that React

862.71 -> is less favorable than Next.js?

866.22 -> I think not,

868.23 -> because it all depends

870.6 -> on the kind of problem you are facing.

873.21 -> React and Next.js are two different tools.

875.97 -> Yes, Next.js is built on React,

878.19 -> but that doesn't mean

879.75 -> that they solve the same problem.

882.75 -> And so it all comes down to you

885.06 -> and what the production needs.

888.39 -> And so React and Next.js,

891.15 -> they're both amazing,

892.35 -> both great tools.

893.94 -> What I love about Next.js is that it contains less code,

898.26 -> but then, you know, it's just about what you like

903.54 -> at the end of the day,

904.59 -> and what your application needs.

906.6 -> But for me, in the meantime,

907.98 -> I will be exploring Next.js,

909.6 -> and building applications on it

912.09 -> to get a more feel on it,

915.06 -> to experience the full developer tools.

918.537 -> And we have reached the conclusion of my presentation.

922.98 -> Thank you so much for your time.

925.59 -> And know I have not forgotten to introduce myself.

929.43 -> Hello, everybody.

930.45 -> My name is Trecia Kat.

931.77 -> I am a South African-based

933.69 -> developer advocate intern at Strapi,

936.21 -> and I hope you enjoyed the rest of the program.

938.58 -> If you're looking to find me,

940.05 -> you will find me on any of these platforms.

943.47 -> And thank you once more and buh-bye!

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