Currently, I'm learning about React & Next.js. To understand how it works, I usually push myself to make some mini-projects using that framework. One thing I hate when I develop a project, it's about config.
It started when I knew a friend who made his starter template. I asked him, . He answered,
I think it's a great idea. I also don't need to feel anxious about the configuration when I make a new project if I have my starter template.
Here's how I made my starter template using Next.js and Chakra UI.
This time, I used the example of the base starter template that Next.js provides.
Next, I initiated the ESlint config so the code style can be consistent. I added at and executed it. The details can be seen here.
After that, execute the command or to initiate . I modified some things due to personal preferences. You also can adapt it to your preferences.
After finishing the ESlint config, I made a Next SEO config. This library is used to modify the meta-tag which is usually used to optimize the SEO and make a preview for the web project.
First, install the Next SEO using . Then, make at the root directory. This is my base configuration. You can accommodate with your preferences.
The base config is done, now it's time to make the folder structure. The base folder structure from the example template is quite good, but I want some modification here. Here's mine.
It's time to modify the UI and layout. Maybe I won't explain the whole process here. It will be too long to explain. You can modify the layout by your option.
Here's my result https://github.com/yehezkielgunawan/yehez-nextchakra-starterrr.
Finally, the final step. Don't forget to push the project to your repo in Github or Gitlab. You can check here for the details.
I used Vercel as my hosting platform. It's easy to use, you can integrate your repository with Vercel, so every time you push an update, it also re-build the project. Read here for the details.
After deployed, let's make the project a public template.
Aaaanddd, that's it. You can use the template using this command
Example:
For Next.js you can use the built-in command to initiate a project based on the example template.
Example :
Your life will be easier with this, so you can focus on the development process every time you initiate a new project, LOL. Congratulations!!!
Here's my starter template: https://yehez-nextchakra-starter.yehezgun.com///. How about you? Not a perfect one, I know. But at least, it's very helpful for me.
Yeah, that's from me. I'm sorry if there're some typos or mistakes here. I'm still an amateur at making a tech article. Happy trying and you can give some feedback here if you want. Thank you.
Reference: Sozonome NextChakra-starter