Awesome method to create a NextJS project.

Why NextJS?

If you work today with web development, have chances that you listened about NextJS. NextJS comes with powerful Sever-Side Rendering (SSR), and Static Site Generation (SSG) capabilities built-in.

Using NextJS you spend more time writing features, and less time struggling with build tools and Webpack. 💥

He have a very great structures of into pages to doing routing to your project and combine with a improved search engine optimization is a great framework to build a frontend project.

Chakra UI, why it?

chakra UI is a very great component library for building React applications. That is super easy to us developing while also taking care of accessibility.

I love the themes that chakra have, by create a color pallet and can automatically create states for hover, active, disabled, etc. As well as be able to build and change themes, like a light theme, and dark theme in very easy form.

Moreover the form of use Styled System, simplifying use of inline styliing with style props, provides shorhand versions of commomn, like margin as 'm' and padding as 'p, and facilitating write codes responsive .

<Text
   fontSize={["1.4rem","1.75rem"]}
   fontWeight="700"
   color="purple.900"
   w={["90%","100%"]}
   lineHeight="1.5rem"
   mb="4"
>
   Hello World!
</Text>

After all, I say that Chakra UI is the best design system to create my projects, all the functionality that is offered help me in create great projects in less time.

Start a Project 🚀

NextJS have a lot types of exemples to start your project, and if you need create a front-end project with chakra ui and typescript, just use this command.

Using create-next-app execute with npm or yarn this exemple:

npx create-next-app --example with-chakra-ui-typescript blogproject
or
yarn create next-app --example with-chakra-ui-typescript blogproject

so now, you have a great base to start your projects.

This is a great form to create a new projects, and start use NextJS and adventuring create awesome interfaces. And if you want others exemples 🚀 from NextJS, you can in this link.