Data Fetching with Next.js Data Fetching with Next.js 13’s Bleeding-Edge Features

• chinook-database

  8 1,657 8.7 TSQL

  Sample database for SQL Server, Oracle, MySQL, PostgreSQL, SQLite, DB2

I’ll be using a Postgres datasource (the famous Chinook database) for my example, using WunderGraph to make it accessible through JSON-RPC to my Next.js frontend.

• pgadmin4

  44 2,096 9.7 Python

  pgAdmin is the most popular and feature rich Open Source administration and development platform for PostgreSQL, the most advanced Open Source database in the world.

  

I’m assuming you’ll have your own data to go along with this, but if you don’t, get the Chinook_PostgreSql.sql file from the official Chinook repo here, and run it (perhaps via a Postgres client like pgAdmin) to seed the Chinook database (it’s a record store’s catalog; artists, their albums, its songs, with some sample transactions and invoices)

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• wundergraph

  108 2,159 9.5 TypeScript

  WunderGraph is a Backend for Frontend Framework to optimize frontend, fullstack and backend developer workflows through API Composition.

  

Coving every shiny, bleeding-edge new feature in Next.js 13 would take more time than we have, so today, let’s quickly talk about the most critical part of literally any app you’ll ever develop — the data fetching story — building this Record Store catalogue browser app on top of a Postgres database, as a learning exercise. Oh, and we’ll be using GraphQL (via WunderGraph ) to get data out of our database, because we don’t compromise on developer experience ’round these parts.

Suggest a related project