A Few Next.js Pitfalls I Ran Into During Development

Login State Wouldn't Persist

First, I had already configured global axios in @/lib/api.ts and added @/lib/auth-context.tsx for authentication logic, using localStorage to temporarily store user information.

But!!! After logging in, I kept getting redirected back and forth: /login to /admin/xxx, then back to /login. Cookie validation on the Go backend was clearly working, and everything looked correct in the browser console too, but it still wouldn't work.

I asked claude, and it added a ton of validation and checks, but nothing helped.

Finally, I removed all the unnecessary logic. While checking the redirects and frontend files again, I found the problem.

I was compiling the frontend into static files:

output: "export",
distDir: "out",
  ```
  This produced files like these: 
  ```text
  /login.html
  /admin/xxxx.html
  /admin/yyyy.html
  ```

But the backend routes and API used URLs like these:
```text
/login
/admin/xxxx
/admin/yyyy

So I added trailingSlash: true, to next.config.ts, then changed all the routes to /login/, /admin/xxxx/, and it worked. The backend redirect logic needed updating too.

Under app, Directory Names Match URL Paths

This issue came from code cursor wrote, and I didn't check it at first. I only noticed later when clicking a link in the nav returned a 404...

---

Maybe I'm the only one who runs into this... After all, it's all simple stuff. I blame the AI.