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

Set up your database

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

Start the app

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

Generate a page for creating posts

Generate components

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

All rightie! Let’s add some code.

Create the “New Post” form

‍

Create the <PostItem /> component

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. 🚀

Create the <PostList /> component

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.

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.

‍