What if your frontend components were always in sync with your API? See how to achieve end-to-end type safety with Next.js, GraphQL, and Apollo.
#1about 5 minutes
Getting started with Next.js for React applications
Next.js provides file-system based routing and a Link component that enables fast, single-page application navigation with intelligent prefetching.
#2about 6 minutes
Exploring data fetching strategies in Next.js
Learn to pre-render pages with data using `getStaticProps` for build-time generation and `getServerSideProps` for fresh data on every request.
#3about 5 minutes
Implementing dynamic routes and using TypeScript
Create dynamic pages using bracket syntax in filenames and leverage Next.js's built-in support for TypeScript to add type safety to your components and props.
#4about 4 minutes
Understanding the core concepts of GraphQL APIs
GraphQL allows clients to request exactly the data they need by querying a well-defined schema, which enables powerful, auto-generated documentation and tooling.
#5about 3 minutes
How to build a GraphQL schema with resolvers
Define your API's capabilities by writing a GraphQL schema and implementing resolver functions that fetch the data for each field.
#6about 4 minutes
Using variables in queries and performing mutations
Pass dynamic values into your queries using variables and modify server-side data by defining and executing GraphQL mutations.
#7about 3 minutes
Auto-generating types with GraphQL Code Generator
Use GraphQL Code Generator to automatically create TypeScript types and even React hooks directly from your GraphQL schema and query files.
#8about 3 minutes
Connecting Next.js and GraphQL with Apollo Client
Integrate your GraphQL API into a Next.js application using Apollo Client to manage state, caching, and data fetching with generated React hooks.
#9about 4 minutes
The benefits of a composable JavaScript ecosystem
React's focused, single-purpose design fosters a rich ecosystem of specialized libraries, enabling developers to mix and match tools for rapid innovation.
#10about 2 minutes
Q&A on GraphQL federation and Next.js authentication
The speaker answers audience questions about using GraphQL to query multiple REST microservices and strategies for handling authentication.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
03:55 MIN
An overview of Next.js and its optimization capabilities
Next.js Unleashed: Optimizing Web Vitals for superior User Experience
Next.js App Router: ExplainedIntroductionVercel’s Next.js has come a long way since its initial release in 2016. What would become the most popular React framework (according to their own website, at least), started as a simple solution for handling routing, SEO optimisation and...
Chris Heilmann
Dev Digest 136 - No JS(on) of mineNews and ArticlesDouglas Crockford is our featured video, so let's talk about evolving JavaScript and all things JSON. Judicious JSON explains all the weird things in it, you can learn why it can be incredibly slow, people wonder what even is a JSON ...
Eli McGarvie
10 Essential Figma Plugins for Frontend Developers in 2023In 2023, tools for frontend developers drop by the minute, and Figma might be the most visually appealing. The cloud-based UX and UI design tool that simplifies almost any design process recently scored a scanty 20-billion-dollar sale, and it was par...
Chris Heilmann
All the videos of Halfstack London 2024!Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
From learning to earning
Jobs that call for the skills explored in this talk.