Next.js

A collection of 23 posts

Next.js

Protecting a Multi-tenant Next.js client/server app with PropelAuth

Learn how to create a B2B Next.js app that creates digital coupons on demand using OpenAI's API and PropelAuth to secure it.

Next.js

It’s not just you, Next.js is getting harder to use

I wrote a blog post the other day about how Next.js Middleware can be useful for working around some of the restrictions imposed by server components. This led to some fun discussions in the world about whether this was a reasonable approach or if Next.js DX was just.

Next.js

Getting the Current URL in Next.js Server Components

You are writing a server component using the new(ish) App Router in Next.js, when you realize you need to get the current URL’s path. This could be for a sidebar, navbar, or even just breadcrumbs at the top of your page. Should be pretty easy, a quick

Next.js

A Complete Guide To Using Cookies in Next.js

As Next.js has grown in complexity, it means there are a number of different ways to use cookies, each with their own caveats. You can read them in server components in the App Router, but you can’t modify them.

React

Why we still use React HOCs

If you’ve integrated with our React library, @propelauth/react, you’ve probably seen that we offer a pretty standard React hook useAuthInfo. It returns a few important pieces of information like: * isLoggedIn - whether or not the user is logged in, as you probably already knew * user - the

Authentication

Authentication with Next 13 App Router and Supabase

In this guide, we’ll build an example Next.js application with PropelAuth and Supabase. We cover the App Router version of Next.js 13, and demonstrate how to create an application that manages both users and organizations using PropelAuth. Create a PropelAuth Project The first step is to create

Authentication

Authentication with Next.js 13 and Supabase

In this guide, we’ll build an example Next.js server-side rendered application with PropelAuth and Supabase. We cover the Pages Router version of Next.js 13, and demonstrate how to create an application that manages both users and organizations using PropelAuth. Create a PropelAuth Project The first step is

Next.js

5 Common Pitfalls with Server Components in Next13 (with examples)

The App Router is a new feature in NextJS 13, and it was recently switched to being the recommended option when you create a new NextJS application. This effectively replaces the Pages Router, and NextJS has documentation on how you can incrementally switch over. The most notable difference in the

Authentication

Announcing: NextJS 13 Support

We’re excited to announce the release of our support for Next.js 13, and applications built using App Router! This library provides a simple way to integrate your Next.js application (either App Router or Pages Router) with PropelAuth in both server-side rendered contexts and client-side rendered contexts, in

Guide

Building a production ready LLM application with BerriAI, PropelAuth, and Next.js

Berri.ai is a powerful product that allows you to easily add AI to your applications. You can, for example, create a chatbot that can answer questions about blog posts that you write just by passing in the contents of the blog post. In this post, we’ll show how

Guide

Next.js Multi-Tenant Starter Application

In this guide, we’ll build an example B2B application in Next.js where users can sign up, login, manage their accounts, and view organization and member information, all using PropelAuth and NextJS. We're going to use the following technologies for walkthrough: * Next.js - for our frontend

Guide

React Hooks for Multi-Tenancy and Authorization w/ PropelAuth

Say you built a SaaS application for restaurants to track information about their orders. There are multiple people at the restaurants who need access to this information. There’s an owner, there are managers, and there are frontline employees who need access too. Each of these users will have different

Next.js

How We Incrementally Migrated to Next.js and Vercel

Recently, we switched our marketing site over to Next.js and Vercel. Our frontend developers are able to create designs in a format they are already comfortable with (CSS and React). Our marketing team is happy that they can make changes without needing an engineer in the loop.

Guide

Instant Multi-Tenant GraphQL APIs with PostGraphile, RLS, and PropelAuth

GraphQL is a query language for APIs that can help your engineering team move faster. Just one set of developers can build and maintain the overall schema, and everyone else gets a friendly interface for accessing/mutating the data. The queries are written like this: { hero { name height } } And it

Next.js

Multi-Tenant Next.js App with Prisma and PropelAuth

In this post, we’ll show how to build a multi-tenant application using Next.js, Prisma, and PropelAuth. We’ll build a simple B2B application where each user can make "posts" within a tenant.

Coding

Avoiding CORS Issues in React/Next.js

The simplest way to fix any CORS issues in React and Next.js is actually not to change anything in React or Next.js but instead to fix your server

Next.js

Setting up a Responsive Multi-Tenant Template with Grommet, PropelAuth, and Next.js

Grommet is a React-based framework that provides tools for you to quickly build responsive and accessible applications. It has some of the most intuitive components for setting up the structure of your product (e.g. headers, footers, responsive sidebars, etc).

Next.js

Add Personalized Content to your Docs with MarkDoc, Next.js, and PropelAuth

Stripe open sourced Markdoc which is a Markdown-based authoring framework. The ability to quickly and easily add arbitrary React components to a markdown file is really cool! It allows you to be really creative and easily add dynamic content to your markdown files.

Next.js

Creating Advanced Reusable Forms in Next.js

In this guide, we’ll create a form that we can use across our product. We’ll start with something simple and slowly add in more complexity like preventing the user from navigating away with unsaved changes

Guide

Creating a B2B Next.js Application

In this guide, we’ll build an example B2B application in Next.js where users can sign up, invite their coworkers to the product, and manage permissions for their teams (RBAC).

Next.js

Fast Serverless Authentication with Next.js and PropelAuth

Next.js is a React framework that provides a lot of useful features out of the box. One of these powerful features is API routes, which allows you to make an API/backend entirely within your Next.js application. In this post, we'll create an authenticated API route that's verified at the edge.

Next.js

Next.js + PropelAuth Authentication Guide

In this guide, we’ll build an example application in Next.js where users can sign up, login, and manage their accounts. We'll include social logins (Login with Google), passwordless logins, and allow our users to upload their own profile pictures.

Next.js

PropelAuth Now Supports Next.js

We're excited to announce that PropelAuth supports Next.js on both the frontend and backend. With PropelAuth, you can easily build and configure login, signup, account pages, organization management, transactional emails, and more in a matter of minutes.