Recently. for the first time in a while, I started to work on a new website. I took a look on google, and on twitter, and decided to use a technology called next.js. So far, I am pretty impressed with it.
The last time I did real web development was around 2016 or so, and things have changed significantly since then.
next.js
The next.js stack seems fast and easy to use. I followed the ‘get started’ tutorials, and then scanned through all of the documentation on the website. There was a a lot of in reading and learning the documentation before I dived in to the project. If should probably be methodical about that for every technology I elect to use.
next.js is primarily about optimization. They have good libraries for loading images and web pages fast. And if you follow their rules, then things will work well. They also have really good functionality that lets you choose if you want your data to load statically, server side, or on the client.
javascript
They take advantage of some new javascript syntax that I just learned about, and they frequently use object structuring. This is syntax that lets you easily transfer between and object and its components.
They also use ‘import’ which is a huge win for javascript, and lets me write a much larger codebase than was possible a few years ago.
I chose to use .js instead of typescript because that’s what the tutorials were written in. So far that has worked out because most example code is written in js. However, the lack of type safety is making it difficult for me to write a big codebase. I’ll need to use a lot of best practices.
One new javascript feature is called “object destructuring”. I learned through examples from a nice page from Mozilla: here. The next.js code used a lot of javascript syntax that was new to me.
Mantine
I’m using a library called Mantine for the CSS layer. I chose it because reddit suggested that it paired well with next.js So far that seems true. I need to be careful not to lose the optimizations from next.js if I include too many external packages.
Deployment
The build/deployment stack with nextjs/vercel is really good. I am able to run npm install for any package I want, and it just works. For the first time in my javascript career, I can just import packages that I want.
I am using react.js which looks powerful. I need to learn some more best practices about how to create components.
Testing
I have two testing libraries. I am using something called jester for unit testing, and cypress for integration testing. It seems ike a lot, but I think that’s what I need for thorough coverage.
Finally
In summary, this is my current stack of things I have to learn:
- vercel
- next.js
- mantine
- react.js
- javascript ( 2023 edition )
- jest
- cypress