This is a Next.js project bootstrapped with create-next-app enriched with state of the art frameworks and features like typescript, storybook, emotion css, etc. See Features.
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/livez. This endpoint can be edited in pages/api/livez.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
React Testing Library builds on top of DOM Testing Library by adding APIs for working with React components.
Fast, easy and reliable testing for anything that runs in a browser.
Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. As an addition, with the help of xwind everything is prepared, that tailwind-classes can be written into styled-components, to make your react components more slim. Unfortunately due to the fact, that tailwindcss can now be jit-compiled, xwind is not working correctly.
Open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
Using eslint, prettier and husky gives us the ability to equal code standards and linting across the team.
Promise based HTTP client for the browser and node.js
An out of the box working mock mode is implemented aswell, if your frontend is tightly coupled to an api, but where you also want to be able to start your app without the need of the api (e.g. the api is offline...). Make sure to adjust the response in the mocks directory.
To start in mock mode simply run
yarn dev:mocks
An env var will be set, that changes axios baseURL to http://localhost:3000/api/mocks.
If you now call http://localhost:3000/api/mocks/randomMythNames, then a property with key randomMythNames is filtered out of the mocks/data.json and will be returned.
There is a Dockerfile gracefully copied from the nextjs-docs.
You can build your container with docker build . -t my-next-js-app and run it with docker run -p 3000:3000 my-next-js-app.