My Recent Experience with NextJS/NextAuth on a New Project

I recently ran into an issue with one of my projects that I had previously fixed so I wanted to look for certain keywords I would have likely put into my commit message within GitHub.

To my surprise though, I found you can’t search GitHub commit messages so this gave me a project idea.

Usually my stack for new projects in ReactJS for the frontend and Laravel for the backend API and MySQL for the database.

For this project, I wanted to try something different, so decided to use NextJS with PrismaJS for the DB management and NextAuth to handle the authentication. I’d dabbled previously as a test project using my own credentials provider for NextAuth (I did a blog tutorial on implementing this as guides weren’t overly clear – this can be found at https://blog.devso.io/implementing-credentials-provider-on-nextjs-and-nextauth/ if you’re interested).

As this project is related to GitHub functionality, I wanted to use GitHub sign-in and thought this would be easier in NextJS/NextAuth than trying to implement GitHub sign-in manually between ReactJS and Laravel.

For those that aren’t aware NextJS is a React framework that allows frontend and backend functionality within the same project using file system based routing, for example, a file in a “pages” directory becomes the URL path for the page, instead of creating a route within a BrowserRouter in app.js that you might do in a standard ReactJS project to link to a component.

Initially, it started well, getting GitHub authentication to work was pretty quick and I thought I was well on my way to making progress. Except I hit an issue around the handling of new users compared to existing users.

When the user signed in via GitHub I wanted to go to one page for a new user to help them set up their account, or go to the dashboard page if it was an existing user, this is unfortunately where the problems started.

No matter what I tried the user would either always be directed to the page as a new user or directed to a page as an existing user. I tried putting keys within the session to flag whether it was a new user or not, and then look at the session from the page, but there seemed to be a timing issue where the frontend didn’t have the key in the session so redirected to the wrong page but by the time that happened the session then created the new key but it was then too late.

Instead of session variables, I tried to use a cookie instead which almost worked but then had another issue. Because I couldn’t redirect to the correct page from the API side, the API would also redirect the user to the dashboard and the dashboard would check the cookie and if was a newly registered user, then the dashboard itself would redirect the user back to the welcome page. This worked, except when the account was set up, I’d end up in a loop where I try and go back to the dashboard but the cookie triggered it to revert back to the welcome again, and changing or clearing the cookie never seemed to work.

I spent a couple of days trying to get this to work but had no luck. Instead, I reverted back to my usual stack of standard ReactJS and Laravel API and implemented the GitHub OAuth between the frontend and Laravel API within a couple of hours – including correctly handling the user going to the correct page based on being a new user or existing user.

Although my main issue was around NextAuth, I also found I wasn’t a huge fan of NextJS — I think I may be the only way as I only ever see people say how good it is, maybe it's just a case of not understanding it properly, or just not used to it enough.

I find the NextJS directory structure to easily get into a mess and hard to find things. Each page is in the directory /pages and API endpoints are in /pages/api.

Dynamic routes I find a little confusing as well, especially for multiple parameters. If you have a single parameter then the file is named [my_parameter].js where my_parameter is the key in the object to access the parameter. If it's dynamic, then the file is stored as […].js, which then gives you an array of parameters, but you have to remember the order that which the parameters can arrive. I found this really confusing – maybe just not used to it but find the route and parameters in Laravel so much easier to follow and debug any issues.

I think NextJS is useful for simple projects, maybe for a quick landing page where you want to get an email list of users to notify for example, but for anything slightly complex I’m going to be sticking with ReactJS and Laravel API for the foreseeable future.

After scrapping my initial weekend project work with NextJS and NextAuth I rewrote it using my usual stack of ReactJS and Laravel a couple of hours each evening after work and released it by the end of the weekend. If you are interested, you can find more info and can sign up for free while it's an early preview at https://gitlog.devso.io.

What's your experience with NextJS and/or if you have any questions about GitLog let me know in the comments