The original create-next-app
documentation is included as README.next.md
.
See the Next.js
documentation to learn more about next
.
See the typescript
handbook for information about typescript
.
- clone the repo
yarn
to install packages- edit the meta properties
- name, version, description, author, and deploy command in package.json
- title and meta description in
src/components/meta/Head.tsx
- change the favicon in the
public
There are 2 ways to run the app locally:
yarn dev
yarn build:serve
dev
uses a development
next.js dev configuration. This is what should be used for regular development (defaults to port 3000).
build:serve
runs the build
command to create a production build of the app, then serves that build via a local server (defaults to port 3003). This should be used for things like lighthouse score, etc. You can modify the port used by modifying the value after the -p
flag for the build:serve
command in package.json
.
Most of the things that could be covered here are probably covered by the next
docs (linked above), but there are a few configuration things worth touching on:
- This template uses
Mantine
as a base component library. See their documentation for available props, theme configuration, etc. - For additional styling / customization
emotion/react
andemotion/styled
are included. See theemotion/styled
documentation for on its usage. - For testing, this template inculdes
jest
andreact-testing-library
. Your test files should follow theComponent.test.tsx
naming pattern, which will allowjest
to find them automatically. Useyarn test
to run your tests.
Storybook is setup to be fairly plug-and-play assuming you know Storybook already. If not, head to their site to get the lowdown. Stories should be added to the stories directory and have filenames with the following pattern: componentName.stories.tsx
or componentName.stories.mdx
(I recommend installing an mdx
editor addon if you plan on using mdx
, which you can read more about here). Whether you use tsx
or mdx
for your stories, you can use doc-blocs to enhance those stories. The storybook addon-docs
comes included with this template.
If the above rules are followed, Storybook should find the files automatically.
Before deploying, run yarn build
to make a production build of your app, then follow the Next.js deployment documentation to deploy on Vercel.
- Investigate custom
deploy
command to automate more of the deployment process