Next.js starter with TS & styled-components to get going fast!
MIT License
When I start a new project, Next.js is my preferred framework to get started with. It comes with SSG & SSR and other optimisations right out of the box and allows you to set up & deploy a product fast.
This repo houses a bootstrapped Next.js project with TypeScript as the main language and some preferred libraries so I can get started on new projects immediately!
For demonstration purposes I added a few components with basic styling to play around with.
styled-components
theme is typed so your text editor/IDE will give you suggestions;framer-motion
libraryYou can clone this repo or use Github's 'use this template' function (the green button - it allows you to create a new repo with this code where this Git history is removed).
Before running below commands, make sure to create a .env.local
file and add BASE_URL=http://localhost:3000
.
yarn;
yarn dev
npm install;
npm run dev
Since I started working with TypeScript in bigger projects I've come to realise I don't want to write vanilla JS anymore in bigger scoped projects. A few points that made me stick to TS:
Styling can easily become cumbersome when working with React. A library like styled-components
slots perfectly into the React way of 'component thinking'. It allows you to keep the styling separated from the business logic in your components, making sure your components don't get cluttered and stay easier to read.
By making use of styled-components
you introduce a tiny bit of JS overhead to your project, but will introduce a bunch of benefits:
How you format code can be a personal preference and result in conflicts working with others; this problem is solved by making use of an opiniated formatting library like Prettier. It takes away the hassle of formatting your files manually by running the format command or use a plugin in your favorite IDE.
This is a Next.js project bootstrapped with create-next-app
.