Next.js starter

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.

A few neat things to point out:

• Added support for SSR CSS!
• The styled-components theme is typed so your text editor/IDE will give you suggestions;
• The theme currently generates CSS variables so playing around with different color options from your browser's dev tools is easy!

Features I'll add later:

• Dark mode
• Optional inclusion of the framer-motion library

Getting started

You 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.

Using yarn:

yarn;
yarn dev

Using NPM:

npm install;
npm run dev

Added tech & libraries

TypeScript

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:

• Finding issues/bugs: the compiler points out what & where the problem is - before you're able to deploy anything;
• Working together: there's less backtracing of code and reading code is easier;
• Development process: it forces you to think differently about your code ("What the heck am I actually doing?");
• Code completion & suggestions in text editors & IDE's!

website | github | npm

Styled Components

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:

• Theming: set up a global theme once and all your styled components can access it anywhere within the component tree;
• Modernising: scoped CSS per component, extending components;
• Optimisations: CSS gets injected only where it's needed. No more bulky CSS files!

website | github | npm

Prettier

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.

website | github | npm

This is a Next.js project bootstrapped with create-next-app.