About the Author
Avatar photo

Bob Palmer

Bob Palmer is an accomplished full-stack developer with a diverse skill set that spans across various technologies. His focal point of expertise lies in the realm of JavaScript frameworks, specifically React, Node.js, and SQL. Known for his unwavering commitment to project excellence, Bob consistently demonstrates the ability to deliver high-quality solutions promptly and within budget constraints.

Building a React Component Library for Next.js with Storybook

Bob Palmer Articles, Development Technologies & Tools, React, Tutorial Leave a Comment

In my last post, Implementing GitHub OAuth with NextAuth.js, we set up a standard single sign on flow with GitHub OAuth in NextAuth.js. This article assumes that you have followed along with that article already, and have your own version of that project locally. If not, but you already have a Next.js project, then you can follow along here just the same.

Last time, we set up a very basic dashboard to demonstrate displaying a signed-in user’s name, avatar, and some usage data from the GitHub API. Since then, NextAuth.js has evolved into Auth.js, but the GitHub implementation remains largely the same. However, if you haven’t upgraded your Next.js projects in a while, I would recommend doing so first.

In this post, we’ll pick up where we left off: upgrading your project’s dependencies, then decomposing your components into a scalable library using atomic design principles (atoms, molecules, organisms, templates, and pages). From there, we’ll install and configure Storybook for Next.js and Tailwind, write your first component stories in Component Story Format 3, and set up shared fixtures so you can preview and test components without depending on live GitHub API calls.

Implementing GitHub OAuth with NextAuth.js

Implementing GitHub OAuth with NextAuth.js

Bob Palmer Articles, JavaScript, Programming, Security Leave a Comment

In my last post, “Introduction to Web Apps with Next.js”, we went through the steps of setting up a new Next.js project, customizing a landing page, and implementing a very simple web application. In this post, we’ll implement an Open Authentication (OAuth) based Single Sign-On (SSO) API within Next.js using NextAuth.js. We’ll be using GitHub as our provider, but the steps here are very similar for other platforms, such as Google or Discord. This will allow us to place portions of our website behind a login screen, restricting access to certain content or APIs for anonymous visitors.

Introduction to Web Apps with Next.js

Introduction to Web Apps with Next.js

Bob Palmer Articles, Development Technologies & Tools, JavaScript, React 1 Comment

In this post, I am going to demonstrate how to set up a simple Next.js web application. Next.js is a heavily opinionated JavaScript framework, in that it has a lot of conventions and recommended tools built into its design.

We’ll use Next.js version 14.2.2 to set up the groundwork for a simple web application. By “web application,” I mean an application that is designed primarily to collect input from a user in a web browser and return some output generated from that input.