Hello!
Have you been asked to start working on a brand new Next.js based web application project? If yes, congratulations, you have a truly cutting edge project on your hands.
Starting a new Next.js project and setting it up takes a few tasks to be done - you need to goto GIT, create your repo, add the right version of tools, libraries and then configure it in your local codebase.
And folder structure is something you need to create from scratch...
This usually takes anywhere between 3-4 days. And you have to worry about how best to organize your code structure
What if I told you, you can shrink the setup time to less than 1 hour? And you will get all the best practices ready to download and use.
When your client (or tech lead) sits down to review your code, they will truly love it!
Writing great Next.js code needs just 5 minutes of your time to read the blog and watch the video below.
Shall we start?
First, let's look at what a great Next.js code base looks like...
There are a few aspects which an architect or CTO will look for in our Next.js code base.
These are:
A) Do you have the right styling?
To improve reusability, easier to change UI and avoid code-bloat
B) Is your code organized in a good folder structure?
To enable adding new features in a modular way
C) Are you following clean coding practices and is our code well formatted?
So that the code base is easy to read and maintain
D) Do you have unit test cases?
So our code can be modified or added without causing regression
E) How light or heavy are your code packages?
Because performance, bundle size of packages in use, and page load speed is super important…
Minified: This is a version of the file. where all unnecessary characters, such as spaces, new lines, and comments, have been removed without changing its functionality.
The process makes the file smaller and thus faster to download.
GZipped: Gzipping is a form of data compression.
.webp "Bundle Size")
- Larger Bundle Size (290.4kB) and longer download time
- Heavier file - (Minified+GZipped) - Mutability: moment.js objects are mutable.
It can result in changes to the original date object, which can lead to bugs and unexpected behavior in the application.
.webp "Budle size")
- Smaller Budle size (107.8kB) and lesser download time.
- Lighter file - (Minified+GZipped)
- date-fns provides modern and performant approach to date manipulation with a smaller bundle size and immutable operations.
This boilerplate addresses all these points as a ready kit so you can focus on building your features.
The code ingredients of this boilerplate are:
# Next.js v13.1.5 with React v18.2.0
# Tailwind CSS instead of inline CSS or MUI library.
# ESLint and Prettier - built in for code quality, code formatting, and code smells.
# Typescript - a superset of JavaScript that adds static typing and more robust code.
# React Testing Library & Jest for writing unit tests, Cypress for end-to-end testing
# Husky to run scripts while working with GIT commits
# clsx for dynamic classnames.
# date-fns a tiny utility package for date formatting in the application
Click here to download the repo from Github
Please watch this 3 minute video to know how to set up this boilerplate.
This is open source code, so feel free to download and modify.
If you have any questions, drop a mail to Nattu@codewalnut.com and one of our engineers will be happy to help you.
Happy coding!
Author
