Welcome to the official unofficial next-react-typescript-boilerplate setup

✅ Features

1. NextJs
2. Custom Express server
3. Styled Components
4. Typescript
5. Linting: prettier, eslint, editorconfig, commitlint and more.
6. SVG file automation: .svg > .tsx
7. Favicons automation: Generate your favicons with 1 command.
8. Http service for api calls
9. Styled system base components like: Box, Card, Grid, Row, Column, etc.
10. Storybook
11. i18n / multi language using next-i18next
12. useSWR for data fetching

🔧 Todo

Need more? Send an email hi@daphnesmit.nl

🎉 How to start!

Initialize the project

• Copy .env.example to .env and fill in the required variables
• Run npm install to install the dependencies

Development server

To start the development server, run the command:

npm run dev

This will run the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will see any linting errors in your console/iTerm2/other fancy shell.

Production build

To start a production build, - local or in your preferred CI - run the command:

npm run build / npm run start

This build the app for production to the .next folder.
It optimizes the build for the best performance. 🎉!

To deploy and build this project using a CI

• Run npm run build to make a production build
• Run rm -rf node_modules to remove devDependencies
• Run npm ci --prod to build only production dependencies
• IIS server: Create web.config file in the root where you fill in a bunch or stuff and run node index.js:

<handlers>
    <add name=“iisnode” path=“index.js” verb=“*” modules=“iisnode”/>
</handler

💡 Next.js

This project uses next.js to achieve server side rendering https://nextjs.org/docs. Some of the major differences with client side react applications are routing and server side data fetching. Also you have to take in to account that you cannot use browser api on the server. To use browser api you need to wrap them in a condition. For example

if [process.browser) {
  window.addEventListener(fn)
}

✨ Generate icons from svg

Place all your icons in /assets/svg. Run npm run svgr. This generates tsx components from your svg's and optimizes them with SVGO. SVGO config is located in the root of the project. The CamelCased filename will be the name of the icon.

Example:

calendar.svg -> Calendar.tsx

Usage:

<Icon icon="Calendar" color="primary" />

✨ Generate favicons / app icons

To generate the favicons:

• Overwrite /public/logo.svg. Make sure the resolution is as big as possible.
• Define the configuration in /config/favicons.js
• Run npm run favicons
• The meta tags are automatically inserted in _document.tsx

🌐 I18n

This boilerplate uses next-i18next for client and server side rendered translations. See react-i18next on how to use it. Note: currently, when updating the JSON translation files, you need to restart the server in order to see the updates

💫 Data fetching

This project uses SWR for fetching data. And example can be found on the /about page SWR is a React Hooks library for remote data fetching.

🚩 Linting

Prettier

Nicer code with prettier!

ESLint

Better code with ESLint and extensions for React and Typescript

EditorConfig

Decide how many spaces or [ugh) tabs you want to intend your project with using EditorConfig.

Commitlint

You might want to remove or customize Commitlint. Commitlint checks if your commit messages meet the conventional commit format. But in case you are using JIRA you might want to have a different commit message structure, example and another

🚀 Typescript

This project is written to typescript. If you aren't that familiar with typescript this cheatsheet is a great resource to get familiar.

📝 Documentation

Documentation for this project is present in storybook. Run npm run storybook to start up the documentation.

💄 Design system

This project uses styled-components and styled-system to create the ui library, but using css, css modules and sass are still supported.

👷 Atomic design structure

The component archicture is set up following the atomic design methodology.

🙌 Credits

Big thanks to:

Tim de Wolf
https://github.com/tpdewolf