If you want to jump right to the code, here’s the repo on GitHub.
You’ll be asked a few questions during setup, and it’ll do the rest of the work for you.
Bison comes pre-packaged with a simple user authentication mechanism, so signing in or signing up is a cinch.
First, tap Login to get to the login screen, then click Sign Up.
Fill out the form and submit, and you’ll be logged in and redirected to the home page.
Now you’ll see these 4 new files in your folder tree:
All rightie! Let’s add some code.
Full code is here. Here are some highlights.
We use this and a few other hooks to get our data into the form component:
Now we’ve got a form that saves a post to the database. Voila. 🚀
Now that we’ve got data, let’s display it.
Now we’ll need to fetch and display the posts. When fetching data with Bison, we recommend something called a “cell.” A cell is a concept borrowed from Redwood.js. It’s a declarative way of wrapping the GraphQL query together with loading, success, and error states.
Now we’ll fill the cell out with the correct query and some formatting for the rendered posts.
Full code here. Important snips:
And we’re done. You now have a (very simple and basic but functioning) blog built in Next.js. Add some data and start having fun.
Bison is in its early stages, but is already a useful tool for kickstarting your Next.js project quickly with great stuff like Prisma, Nexus, and Hygen built-in.
If you try out this tutorial, please drop me a line with any feedback or questions. Or comment right here.
Mike Cavaliere is a Senior Engineering Strategist at Echobind. He’s been working with web and mobile software for two decades as an engineer, manager, and one-time CTO. He’s written dozens of articles, been on a number of podcasts, and authored a book entitled Cut into the Jamstack: Build and Deploy a Full-Stack Application Using React and Next.js. He’s a parent of two boys, loves travel, cocktails, comedy, and most music, with a special place in his heart for 1990’s hip-hop.