Getting Started with Next.js in 2024: First Impressions
The first half of this 2024 has been all about Next.js for me. Great timing since I noticed more and more companies requiring it, this felt like the natural next learning step for me.
⭐ The stars aligned and I landed a client for whom I’d be building a prototype using Next.js, which made me feel lucky to finally have the opportunity to use the framework in a “real product”.
It’s rare to come across the chance of building a web application fully from scratch and using a new framework and, even though it sounded intimidating, it has ended up being one of the best learning opportunities.
First steps into Next.js
I got started by following one of the tutorials on Next’s official documentation (they are really well put together):
https://nextjs.org/learn
(One misstep here is that I started by doing the Pages Router tutorial, when the update to the App Router was already out, so I would suggest going straight to the App Router version of this tutorial).
💡 In order to quickly understand the difference between the Pages and App router, this video was super clear and helpful:
https://www.youtube.com/watch?v=xXwxEudjiAY
During this tutorial you will build a simple application which will show you the basics and your way around a Next application. If you already know React, the jump should be quite smooth.
What I found to be one of the biggest differences was the need to strictly follow the folder structure in order for things to work the way they are intended and take advantage of all the built-in features, for example: default routing.
Also getting used to having both Frontend and Backend (server) folders and files in the same place; having an organized folder structure and understanding where and what things are is fundamental 🏆.
Enter the T3 stack: “The best way to start a full-stack, type-safe Next.js app.”
When getting started with the client’s project, I was suggested to use the T3 stack, which would introduce yet another bunch of new concepts.
The creator says it’s focused on simplicity, modularity and full-stack type safety. Their CLI will help you streamline the setup of your app and I can confirm it’s really good at it.
Their usual main pieces are: Next.js, TypeScript and Tailwind CSS. For Backend: tRPC, Prisma and NextAuth.js
⚡ T3 will determine how things are bootstrapped together, you just need to choose the pieces. Personal decision how you feel about that, but the upside is that you get the whole setup running without having to put much time into configuration.
To understand it better, I powered through yet another tutorial found on their site:
https://create.t3.gg/en/introduction
You will build a more complex application and go through several concepts: from setting up a database, to implementing authentication, fetching and displaying data in the Frontend.
It takes a bit longer to finish, but it’s definitely worth it 💪. After completing it, I felt more familiar with the setup and it was easier to understand what things are and can potentially do.
All in all I think Next.js was a good choice, not only because now I got to use it and see it in action, but also because of the time-limits I had to deliver this prototype: it was super fast to get the setup running so that I could start working on both Frontend pages and components and setting up database and server functionality.
Some first impressions after half-year going at it
- Using ‘use client’ and ‘user server’ directives for the first time: I think the combination of server and client components is quite powerful 💜! I love having the possibility of combining components which are more in charge of fetching data and passing it down as props, with components which are more UI heavy/ oriented.
- The option of having server component has resulted in several things: I am barely using any ‘useEffect’ or ‘useState’ hooks (I have probably used some ‘useState’ purely for UI changes). Which is one of the things I appreciate being partially free of (‘useEffect’ being trickier to master than one initially thinks 🤯).
- Given, this is still a small application where we are not having to deal with huge amounts of data, but server components also make me approach state management differently. The components are more dynamic without a need for a store or context. You can go a long way without a dedicated state management library.
💡 Bonus tip:
Another thing that has simplified state management is the ‘useFormState’ hook, which I also used for the first time in this project (you need a framework that supports server components in order to use it).You’ll provide a formAction, which is basically what runs when you submit the form, and can update state based on the response of the action.
https://pl.react.dev/reference/react-dom/hooks/useFormState
I believe that the more I use it, the more handy stuff I will keep learning about Next.js 🤓. I personally have enjoyed a lot working with it, especially since I like having an overview of the whole process: from how to gather and store/structure data, to how to fetch it, manipulate it and display it. Next.js has proven a great match with a straightforward setup 👌.
