Peter Jacxsens articles - 58 total
Mocking Next 16 useParams, useSearchParams, usePathname and useRouter in Jest
In this chapter we write a test for a component that uses router related hooks: useParams,...
Mocking async params and searchParams in Next 16 using Jest and React Testing Library
In the previous chapters we looked at how params and searchParams work in Next 16. We then went over...
Setting up Jest, jest-dom, React Testing Library + linting for Next 16
Before we start with writing tests and mocks we first need to setup Jest and React Testing library....
An example of using async params and async searchParams in Next 16
Our goal is to write tests and mocks for params, searchParams and some hooks. Therefore we need...
Async params and searchParams in Next 16
With the release of Next 16, the params prop of the page route component (and layout component) is...
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...