WhoBuilt

Static Sites with Next.js 9.3 and Prisma

Apr 21, 2020· 26 min· 12K views·Watch on YouTube
#Web Development#Databases

leerob presents a tutorial on building static sites with Next.js 9.3 and Prisma; no speaker name, role, company, or other participants are identified.

Why build static sites

The demo shows a static song list with dynamic song routes, each generated from database data. The presenter argues that static sites can be cheaper, faster, and easier to serve through a global CDN while still supporting dynamic features.

Next.js and Prisma at build time

The presenter describes three data approaches: no fetching, fetching from APIs or databases during generation, and fetching at runtime with newer Next.js features. With Next.js 9.3, `getStaticProps` can query a database at build time, and that code stays off the browser bundle. Prisma provides generated, type-safe queries for databases such as SQLite, Postgres, and MySQL.

Build song pages from database records

Using a seeded SQLite database, the tutorial adds `getStaticProps` to fetch songs and their related artists with Prisma. It then adds YouTube IDs and album cover URLs to the schema, runs a migration, and regenerates the Prisma Client. For individual song pages, `getStaticPaths` maps database IDs to routes such as `/songs/3`, while `getStaticProps` loads each song's data.

Style and navigate the generated pages

The completed example uses Chakra UI for styling and Next.js `Link` for navigation. The presenter explains how links map the `[id]` page file to routes such as `/songs/1` and prefetch pages for faster navigation.

When static generation fits

The presenter recommends static generation when a page can be rendered ahead of a user's request. For data that changes on every request, server-side rendering may fit better. Incremental builds and a Next.js RFC are mentioned as ways to regenerate pages more selectively.

Takeaways

  • Use `getStaticProps` to fetch database data during generation without shipping database-query code to the browser.
  • Use `getStaticPaths` to create routes from database records, converting numeric IDs to route strings.
  • Prisma can provide generated, type-safe queries and help manage schema changes through migrations.
  • Choose static generation when content can be prepared ahead of requests; consider server-side rendering for data that changes per request.
  • Next.js links can prefetch generated routes to make navigation feel faster.

Mentioned in this talk

PrismaYouTubeNext.jsPostgresPrisma StudioPrisma ClientPrisma MigrateGatsbyReactSQLiteChakraJAMstackstatic generationincremental static generation

Search inside this talk

What was claimed 10

  • feature
    JAMstack: Combines JavaScript, APIs, and markup while delivering a static site.
    “JAMstack, which stands for JavaScript, APIs, and markup”
    YouTube
    Unverified1 source· Talk
  • feature
    Next.js: Version 9.3 supports static site generation with build-time data fetching and dynamic routes.
    “With the release of Next.js 9.3, Next.js ... is now a complete static site generator.”
    YouTube
    Unverified1 source· Talk
  • integrates with
    Next.js integrates with Prisma
    “When you combine Prisma with Next.js 9.3”
    YouTube
    Unverified1 source· Talk
  • feature
    Prisma: Provides autogenerated, type-safe queries based on an existing database schema.
    “It gives you autogenerated and type-safe queries based on your existing database schema.”
    YouTube
    Unverified1 source· Talk
  • feature
    Next.js: `getStaticProps` fetches data at build time and passes it to components.
    “`getStaticProps` is the special sauce that lets you query the database or make an API call to fetch data, then pass it to your components at build time.”
    YouTube
    Unverified1 source· Talk
  • uses
    Prisma Client uses SQLite
    “Let's say `prisma = new PrismaClient()`.”
    YouTube
    Unverified1 source· Talk
  • feature
    Prisma Migrate: Changes database schemas and creates schema migrations.
    “Prisma Migrate that lets you change your database schema ... and create schema migrations.”
    YouTube
    Unverified1 source· Talk
  • feature
    Next.js: `getStaticPaths` declares the dynamic routes to generate.
    “my `getStaticPaths` function has only told my application that it knows about one path”
    YouTube
    Unverified1 source· Talk
  • feature
    Chakra: Provides components and style props for building and styling React applications.
    “a great component library and design system for building React applications.”
    YouTube
    Unverified1 source· Talk
  • feature
    Next.js: Link can prefetch routes for faster client-side navigation.
    “it allows for faster client-side navigation by prefetching routes.”
    YouTube
    Unverified1 source· Talk

Related talks