Build a Fullstack App With Strapi and Next.js | 1-Hour Tech Talk | DigitalOcean

Build an API and frontend in less than an hour using Strapi as your backend and Next.js as your frontend. This talk is designed for any developers that want to learn to build a fullstack app.

What You’ll Learn
- How to build an API
- How to build a frontend
- How to connect backend and frontend
- How to deploy a fullstack app

Agenda
0:00 Hello!
1:16 Introduction

Building a backend with Strapi
1:54 Strapi for backend APIs
2:09 Next.js, a React framework
2:40 Building a big blog in a JAMstack world
3:30 Let’s build a blog!
4:00 Create an API in 5 minutes
6:10 Setting up an API
8:38 Create content type
11:30 Create API endpoint
14:08 Add new Relation field
17:19 Creating multiple entries
20:55 Strapi blog sample

Building a frontend with Next.js
21:13 Creating a blog from the command line
23:43 Getting started with Next.js
25:30 Data fetching: client & server-side
28:01 `getStaticProps` (Static Generation)
31:50 Deploying Strapi apps from GitHub repos
35:05 Dynamically generate pages
35:38 Export `async`  functions: `getStaticProps` and `getStaticProps`
36:44 `getStaticPaths` (Static Generation)
42:50 Export: `next build` and  `next export`
44:30 Benefits of dynamic generation
48:05 Import link from `next/link` (Routing)

Wrap-up
51:09 How this stack speeds up development
51:58 Adding Comments to the Post page
53:45 Deploying from DigitalOcean App Platform
57:00 Creating a Post with Insomnia
58:55 Connecting a database to local Strapi
59:25 Coming up next

About the Presenter
Chris Sev is a Senior Developer Advocate at DigitalOcean and the founder of scotch.io. He builds fullstack apps with JavaScript and puts a focus on building businesses. Tweet Chris at @chris__sev: Twitter: chris__sev

Resources
- Documentation: https://do.co/3WKjVn4
- Backend API: https://github.com/chris-on-code/blog...
- Frontend: https://github.com/chris-on-code/blog...

- - - - - - - - - -

Watch more Tech Talks from DigitalOcean: http://do.co/techtalks

New to DigitalOcean? Get US $100 in credit when you sign up: https://do.co/build

Subscribe to the DigitalOcean YouTube channel:
https://www.youtube.com/digitalocean?...

- - - - - - - - - -

About DigitalOcean
The DigitalOcean Developer Cloud™ simplifies modern app creation for new generations of developers working independently, at tech startups, and within small-to-medium sized businesses around the world.

#Strapi #Nextjs #DOTechTalks