Welcome to the Data Wow's Next.js Template repository! This is an open-source template that we use internally at our organization for creating new Next.js projects. The template provides a fully-configured Next.js setup out of the box, allowing developers to hit the ground running with a robust and scalable foundation.
To use this template, ensure you have the following installed:
- Node.js (v20.17.0)
- asdf as the version manager
- Yarn as the dependency manager
- Visual Studio Code with the following extensions:
You can create a new Next.js project using this template by running the following command:
npx create-next-app APP_NAME --use-yarn --example https://github.com/datawowio/nextjs-templateThis template comes with a set of predefined commands that simplify common development tasks. Each command is designed to help you efficiently manage and build your Next.js application. Here’s what you can do with them:
| Script | Description |
|---|---|
yarn build |
Runs both the Next.js build and Storybook build processes. |
yarn build:next |
Builds the Next.js application. |
yarn build:storybook |
Builds Storybook for production. |
yarn check-types |
Checks TypeScript types without emitting output files. |
yarn clean |
Cleans all build artifacts (Next.js, Storybook, type-checking, and test coverage). |
yarn clean:check-types |
Removes TypeScript build info (tsconfig.tsbuildinfo). |
yarn clean:next |
Removes the .next build folder for Next.js. |
yarn clean:storybook |
Removes the storybook-static folder for Storybook builds. |
yarn clean:test-coverage |
Removes the coverage folder generated by Jest. |
yarn dev |
Runs both the Next.js and Storybook development servers in parallel and watches for locale file changes. |
yarn dev:next |
Starts the Next.js development server. |
yarn dev:storybook |
Starts the Storybook development server on port 6006. |
yarn format |
Formats code using Prettier. |
yarn lint |
Runs Next.js's linting process. |
yarn merge-locales |
Merges translation files from multiple JSON files into one. |
yarn start |
Starts the Next.js application in production mode. |
yarn test |
Runs Jest tests. |
yarn watch |
Runs both watch:merge-locales and watch:test in parallel. |
yarn watch:merge-locales |
Watches for changes in the locale files and automatically merges them. |
yarn watch:test |
Runs Jest in watch mode, re-running tests on file changes. |
This template comes with a comprehensive setup out of the box, including:
- MUI: A pre-configured Material UI setup with theming support.
- Storybook: A fully-integrated Storybook environment for building and testing UI components.
- Internationalization: Configured with
next-intlfor handling multiple languages. - Jest Testing: A testing framework setup with Jest to ensure your application functions as expected.
- Library Conventions: Standard libraries pre-installed and configured for seamless development.
- Basic Folder Structure: A recommended folder structure that every React application should follow for scalability and maintainability.
This project is licensed under the terms of the MIT license. For more details, please refer to the LICENSE file in the repository.
We believe in the power of open-source software. Contributions, feature requests, and bug reports are always welcome! Feel free to submit a pull request, open an issue, or get in touch if you have any suggestions or feedback.