About one year ago, I came across a YouTube video entitled "Next.js in 100 Seconds" by none other than Jeff Delaney, better known as Fireship. Since then, I've been using NextJS to prototype every side project idea that has come to mind, and I'm sure I've started and abandoned at least a dozen NextJs projects.
One project I didn’t abandon, however, is a student management and tutoring platform. I built it for a language school owned by a relative. With the help of an intern, it took three months to complete. The finished product is hosted on Vercel and has a back-end powered by Firebase.
Here’s what I learned from this experience:
NextJS Layouts suck
Custom layouts are not supported by default in NextJS 12 and earlier versions, which is a problem. The app we created has three page styles: public-facing pages like the home page and about us; authentication pages for signing in and resetting passwords; and dashboard style pages that contain the application's core.
The official NextJS documentation recommends using a per-page layout based on a pattern they propose. When I first read this at the start of the project, I found it overly complicated and decided to use the simpler approach of checking the current route and wrapping the parent app component with the respective layout.
In retrospect, both the suggested pattern and my simplified one do the job, but neither is clean nor scalable. My approach requires that every new route be added to the appropriate array on the app page, whereas the official suggested method offloads the layout to each page, despite the fact that it is not the responsibility of each page to define its own layout.
Note: NextJS 13 is a major update to the framework that addresses this issue. It is currently in beta but is not recommended for production apps.
Forms are better in React
This project was my first experience with complex forms in React. With a bit of research, I found a powerful library called React Hook Form. The power of React being an extensible library really shines when combined with powerful third-party libraries like this one. With a simple hook and a few function declarations and custom tags, I was easily able to build a powerful reactive form with field validation.
Without going into too much detail about how this library works, I strongly recommend it to anyone building forms with NextJS or any React based framework for that matter. Furthermore, the documentation is fairly clear, with examples of many use cases.
Backends are overrated.
We were able to deliver a product of this scale in three months primarily because we chose to use Firebase instead of building our own backend. For those who are unfamiliar, Firebase is a free-to-start backend-as-a-service owned by Google that provides everything needed to build a full-stack application.
We used the following services for our use case: Firebase authentication: to manage the creation and verification of student accounts as well as safely storing and resetting passwords Cloud Functions: to handle server-less cron jobs related to the business logic of the applications Firestore Database (no-SQL): to store and manage all the data related to students and the business logic of the platform.
To sum up, I spent three months this year building a full stack web app using NextJS and Firebase, and the three things that stood out to me the most were how layouts are an issue in NextJS, the React Hook Form is a solid alternative to Angular reactive forms, and Firebase makes it difficult to justify building a backend from scratch.