Starter template for building a project using React, Typescript, Next.js, Jest, TailwindCSS and ESLint.
- Clone or download the project.
cd
in the project directory.- If you cloned the project, make sure you remove the remote reference to this project by running
git remote rm origin
. - Copy
.env.example
to.env
as that file is used to load up all your environment variables. - Run
yarn install
ornpm install
to install all dependencies.
-
yarn dev
: To start a local development server. -
yarn test
: To run the entire unit test suite usingjest
. -
yarn lint
: To run the ESLint based linter to find out the issues in the project. -
yarn format
: To autoformat all the issues. -
yarn export
: Run this after runningyarn analyze
to export a build copy. -
yarn production
: To export a production build. Useyarn start
to serve that. -
yarn upgrade --latest
: To upgrade all packages to their latest versions (could include breaking changes).
- All Next.js entrypoints are housed in the
pages/
directory as a default. - Everything else is in the
src/
directory. src/components
are all stateless reusable components.src/containers
are more of stateful components for more main level components, like a whole page or screen for example.src/css
folder is there just to house the Tailwind initialization.- All env variables are available in
.env
files (.env
file isn't committed). Whenever you update.env
, please update.env.example
and.env.test
andnext.config.js
to proxy all environment variables properly. You can access these variables in the app source code anywhere usingprocess.env.<VAR_NAME>
.
My personal preference is to have the bare minimum code in pages/
and house everything in the src/
directory. Helps keep everything in one place, neat and tidy. You can change this in any way you prefer.
If you feel like changing the directory structure, please change the appropriate settings in the following files:
.babelrc
jest.config.js
postcss.config.js
tsconfig.json
- The
lint
and theformat
scripts inpackage.json
-
This project removes the
x-powered-by
response header vianext.config.js
by marking thepoweredByHeader
property asfalse
. -
This project also adds support for trailing slash on URL's. Makes
/dashboard/
redirect to/dashboard
instead of 404ing.So if you have a route for
/dashboard
, a request for/dashboard/
404's. This is definitely true for file-based URL's as documented here: vercel/next.js#5214 (comment). Picked the fix from that GitHub Issue.NOTE: Delete
pages/_error.ts
to disable this. -
If you wish to use
Enzyme
instead ofReact Testing Library
, please refer to this commit. Enzyme was removed with that commit.