Creating Your Own JAMStack Blog in No Time with Next.js and Bison

Next.js is a fantastic framework for building fast and powerful JAMStack web applications — that’s one reason among many that it’s our go-to JavaScript framework at Echobind. We’ve wrapped Next.js with a set of tools we regularly use into a JAMStack generator called Bison, which makes Next.js even more powerful. In this article, I’ll show you the steps to building a custom blog with Bison and Next.js.

If you want to jump right to the code, here’s the repo on GitHub.

Run the Bison Generator

This will generate your app skeleton, run and create a Git repo automatically.

Set up your database

You’ll want to check the latest README for full steps, but it’s as simple as making sure PostgresSQL is running (I highly recommend Postgres.app) and running

.

You’ll be asked a few questions during setup, and it’ll do the rest of the work for you.

Start the app

Run from the directory you just created, and visit http://localhost:3000. Your app is running, and you should see a screen like the one below. We’re in business.

Create a user account

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.

Add some database tables

We’ll need a table and model to create and list posts. Edit which is the source of truth for the data model. Adding a model is pretty easy.

Then run , to generate a database migration for it.

Now run the migration using .

If you look at your database using Postico or , you’ll see the resulting table and columns.

Generate a page for creating posts

Use Bison’s page generator to stub the page:

Generate components

We’ll need 2 React components for creating and showing posts and , so we’ll generate them with Bison’s CLI commands. These wrap 👍 some pre-packaged Hygen generators that Bison comes with.

Now you’ll see these 4 new files in your folder tree:

All rightie! Let’s add some code.

Create the “New Post” form

The page container for is quite simple; aside from styling, we add the component which we’ll build immediately after.


Create the <PostItem /> component

Full code is here. Here are some highlights.

Bison comes packaged with , so we build the form out like this:

Because Bison also sets up for us, We add a mutation to create a post like so:

In turn, Bison’s configuration sees the above and generates a nice React hook for us to plug into 🎉:

We use this and a few other hooks to get our data into the form component:

And here’s the handler which triggers the createPost mutation and redirects back to the homepage upon success:

Now we’ve got a form that saves a post to the database. Voila. 🚀

Create the <PostList /> component

Now that we’ve got data, let’s display it.

If you remember, we already ran the generator for the component. So we start by importing the into the homepage and displaying it like so:

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.

will create as below.

Now we’ll fill the cell out with the correct query and some formatting for the rendered posts.

Full code here. Important snips:

Don’t forget to include the cell in the component:

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.

Conclusion

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.

More about:

Mike Cavaliere

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.