First Impression of NextJS 13 After 5 Months of Not Using It
I was a web developer, mainly using NextJS, for about 1 year until I took on a mobile role at my current job. Five months have passed by without me touching anything related to web development. Needless to say — since web development is fast-moving — that I was pretty behind on the changes. Thus, here’s my personal take while trying out NextJS for the last 3–4 days.
Faster?
Nextjs13 boasts on its speed compared to its previous versions. For me, it’s not that noticable while creating a small project I’m currently working on. So if I had to guess, the speed difference will be more noticable if we’re working with a large project (since NextJS12 is already pretty fast).
Loving The New App Directory
One thing that itches me when developing with NextJS before is the fact that we can’t put components in the same folder as our page because we have to put pages in a /page directory. This makes structuring features harder when the project gets larger.
The older version suffers greatly when a new feature is about to be implemented. Suddenly, we have to structure the /components folder to be similar to /pages folder for clarity on which components is used by which page. Then, we are left wondering why didn’t we put our components and pages in the same folder?
The new version, on the other hand, solves this problem of components and pages needing to have separate base folders. You can now add new components in the same folder of the pages that uses it. This makes our code cleaner. If you’re not convinced that this is cleaner, Robert C. Martin, writer of clean code, on his talk might convince you better.
That’s not all, the newer version also introduces layout.js, which will provide a layout to the entire page in a folder. Also, the layout.js file is replacing _app.js and _document.js file if you place it in the root /app folder.
Hot Reload On Layout Is Not Working
Sadly, when trying out new features, the hot reload on the root layout (layout.js in the root /app directory) does not seem to work. So if I want to change the overall layout, I have to refresh the page to see the change. I don’t know if this is intended or not, but the previous version seems to work fine with this issue (by creating a layout component and including it in every pages). Maybe this is because of the root layout replacing _app.js and _document.js files? Hot reload on anything else is working fine.
That’s all for my first impression of the changes in NextJS. I might post more about it once I get used to the changes.
With all that being said, I loved NextJS, and I love it even more after the changes, and I will still use it for my next web projects.
