Peter Jacxsens articles - 53 total
How to test if a mocked component receives the correct props in Jest and RTL (new since React 19)
This article serves 2 purposes. Firstly, explain how to test if a mocked component receives the...
5. Mocking usePathName, useSearchParams and useRouter with Jest in Next 15
In previous parts we saw how to use and test the async searchParams prop in a route page component....
4. Testing (async) searchParams with Jest in Next 15
This is the fourth part in a series were we look into using and testing the new searchParams...
3. How to setup Jest in a Next 15 project (+ eslint for testing)
At the time of writing the first 2 parts in this series, I was using Next 15.0.1. That version still...
2. An example of using searchParams, useSearchParams and Next router in Next 15
This is part 2 of a series on searchParams in Next 15. In the first part we talked about synchronous...
1. Synchronous and asynchronous searchParams in Next 15
Next 15 changed how we use the searchParams props of the page.tsx file (the route root,...
21/ NextAuth + Strapi: Final pieces and conclusion
There are some issues that we left unhandled, let's quickly go over them. Automatically...
20/ Change password flow in Strapi and NextAuth CredentialsProvider
The code in this chapter is available on github (branch changepassword). The last functionality in a...
19/ Updating the userdata in Strapi and NextAuth
We already build a form and a custom Strapi endpoint to update the user. We also established that we...
18/ Edit username form and custom Strapi route and controller
We can now build the functionality to update the user's data (username). This is actually quite...
17/ Change password flow in Strapi and NextAuth
We have nearly finished. We'll first be creating a user account page. On this page, the user will be...
16/ Forgot password flow with Strapi and NextAuth
What do we need to do? Make a page where the user requests a password reset. The user should enter...
15/ Sending email confirmations in Strapi
The code in this chapter is available on github: branch emailconfirmation. We have a full sign up...
14/ Signing up with NextAuth CredentialsProvider using server actions and useFormState
This code for this example is available on github: branch credentialssignup. We have our form,...
13/ Signing up with the NextAuth CredentialsProvider
Before we start coding there's a problem we need to handle with GoogleProvider and then we need to...
12/ Error handling in our form component for the NextAuth CredentialsProvider
All the code for this chapter is available on github: branch credentialssignin. We have some things...
11/ How to handle errors in the NextAuth authorize function / CredentialsProvider
All the code for this chapter is available on github: branch credentialssignin. The app in it's...
10/ NextAuth CredentialsProvider: signing in
We will now add the credentials auth flow to our project. By credentials we mean the old school login...
9/ How to add error handling to NextAuth GoogleProvider
This chapter is a bit tricky because we need to introduce some new concepts. On top of that, NextAuth...
8/ Using NextAuth GoogleProvider to put a user into the Strapi database
The final code for this chapter is available on github (branch callbacksForGoogleProvider). The...
7/ NextAuth callback functions explained
The final code for this chapter is available on github (branch callbacksForGoogleProvider). NextAuth...
6/ NextAuth: creating a custom login page
Up until now we've used the default login page NextAuth provides us. But we had 2 problems with...
5/ NextAuth with GoogleProvider: sessions
This is the second part on the basic configuration of NextAuth with GoogleProvider. The finished code...
4/ NextAuth with GoogleProvider: signing in
In this chapter we're going to install NextAuth and setup a basic example with Google provider. Note...
3/ NextAuth v4: introduction
NextAuth is an open source authentication solution for fullstack (Next) applications. It offers...
2/ Next + NextAuth + Strapi: setting up our project
We need to do some installing and configuring before we can start. The endpoint of the setup code can...
1/ Full guide for authentication with Next 14 + NextAuth 4 + Strapi v4 using Google and credentials provider
I recently started looking into Strapi, a headless cms. As it is backend only, it's up to you to...
Suspense, client components and static rendering in Next 13
Up until now, we have been working with dynamically rendered server components. But, there are other...
Using loading.js and Suspense in Next 13
Next 13 introduced build-in mechanisms for displaying loading states: loading.js Suspense In this...
How to mock useSearchParams() and useRouter() with Jest in Next 13 (next/navigation)
Edit: This article is out of date. Read the updated version: Mocking usePathName, useSearchParams and...