NextJS + GraphQL Blueprint: Professional Grade Setup

We'll use NextJS, Apollo Server Micro, Type GraphQL, GraphQL Code Generation, react-query and graphql-request to make a completely type safe end-to-end GraphQL solution for NextJS applications.

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

0:00 Introduction
0:59 Project Introduction
3:27 Converting To TypeScript
4:18 Apollo Server Setup
10:38 Making Your First Query
12:16 Refactoring The Schema
20:17 Building The Index Page
25:18 Mantine Setup
28:27 Finishing The Index Page
30:44 Second Walkthrough
37:40 Outroduction

#nextjs #graphql # dog_adoption_application

[jonasboardwalker]

When I first discovered your channel, I thought: such a treasure! It should be hidden from the peoples eyes. But of course I’m not a selfish rascal, and I share it with every software engineer I know. Really love your content, it helps me a lot.

[hugodsa]

I literally did this exact same setup about 2 weeks ago, and God there were a lot of bumps. There are some really good takes here. Thanks Jack

[edgaremmanuel]

I never skipped an ad since the first day I came across this channel. Pure premium content

[pablomotta___]

Jack, you are easily one of the top 5 best web dev teachers in youtube. Thanks for taking the time to share your knowledge!

[samuelgunter]

Hey gamers, I'm just commenting to say that the library `apollo-server-micro` is created by Apollo themselves, and isn't a mini-version of Apollo Server, it's for the framework called Micro that NextJS uses (there is also `apollo-server-express` for ExpressJS and `apollo-server-hapi` for Hapi). So using this library gives you all the features of the base Apollo Server with less configuration.

[Redstonepowercrafter]

Hey Jack, first thank you for your great content. Love your videos as you most of the time show a complete tech stack and not each technology in isolation. I think this just becomes more and more important, as even if you pick a lite tech stack, it most of the time includes already more than 5 different technologies, depending on what you count.

I understand that you currently still want to cover each technology from the ground up in every video so that no one feels left behind. Sadly, maybe because of time constraints, some important tech stack integration gets left behind.
For example, the implication of using fetch inside getServerSideProps, i.e. a second roundtrip and invocation of 2 serverless function instead of one. An example solution just with apollo client instead react-query + graphql request can be found in the official apollo-server-and-client example.

I think many of your viewers would not hesitate to watch even longer videos, so you have the time to go into more detail  and explain the implications of combining multiple technologies in a specific way.
Thanks again  for your awesome videos.

[jamdonut]

was searching a while for decent setups after a few attempts and trying to make the whole process driven by docs - i'm about 10% through the code now to get it working. Nice work, piece of genius :)

[designdeveloprepeat]

Awesome Content and Quality! exactly what I need to implement for my personal project. Thank you so much for taking the time and effort to create this video, Jack!

[PeterJaffray]

Yes Sir - you had my back. This video is exactly what I needed.

[ooogabooga]

I wish to see more this advanced setups, watching you lets me remind myself, I still have a lot to learn. And this is soo fun :)

Ohh btw, I love your the nature footages that you take outside of computer screen, it feels super calming

[psyferinc.]

thank you very much. i had to rework and refactor my code for 3 full days but it really opened my eyes to how thinking about the tools i am using

[willpick]

Best React content I’ve found so far. Thanks for the great videos!

[belkebirnadjib]

So many things that can "get you", and by "you" i mean all of us, awsome tech stack by the way.

[rdalert]

YouTube algorithm is really something, I'm working on a NextJs project with GraphQL endpoint using Apollo and awesome video suddenly pops up

[haroldpepete]

you're the man, all your videos are clear and with a lot of knowledge

[lying]

Men, your videos inspires me a lot. Thank you!!

[supa]

Jack, your channel is amazing! Thank you so much!

[igotbit]

Let's 💎💎💎💎 Love this man's videos

[succatash]

Your improving every video it's awesome to see and we learn awesome things as well

[DionsTravels]

that IDE font is like hieroglyphics, I need a lookup table just to decipher it 😂😂😂