React-Ts-Next-Boilerplate is a starter project (boilerplate) for developing modern web applications using React, TypeScript, and Next.js. This project aims to provide a solid, ready-to-use foundation to help you quickly build robust and high-performance front-end applications.
- React, TypeScript, and Next.js: Harness the power of these popular technologies to build modern web applications.
- ESLint and Prettier Configuration: Ensure your code is clean and consistent from the start.
- CSS Styling with Pandacss: Use Pandacss to efficiently and customizably manage your application's styles.
- Commit Management with Husky and Lint-Staged: Avoid poorly formatted or error-ridden commits with these tools.
- Code Generation with Plop: Speed up component and page creation with this code generator.
- Unit Testing with Jest and Testing Library: Ensure your application's stability by writing unit tests.
- Detailed README with instructions for getting started and developing your project.
-
Install Node JS & npm in your computer Here
-
Install Git in your computer Here
-
This project uses Yarn as package manager
npm install --global yarn
To run tests, run the following command
yarn testClone the project
https://github.com/JFeremy/React-Ts-Next-BoilerplateGo to the project directory
cd my-projectInstall dependencies
yarn installBuild the project
yarn buildStart the server
yarn startThis script will generate all content for a new page
yarn generate // choose 📃 Page
> Page name ? // Enter the name of the page (it will be the URL path)
> Page path after [lang] ? // for example for an subpage cv under about-me, enter about-me/ Example
λ yarn generate
yarn run v1.22.19
$ plop
? [PLOP] Please choose a generator. 📃 Page - Create a page
? Page name ? cv
? Page path after [lang] ? about-me/
✔ ++ \src\app\[lang]\about-me\cv\page.tsx
✔ ++ \src\app\[lang]\about-me\cv\__tests__\page.test.tsx
✔ ++ \public\locales\pages\cv.page.ts
✔ _+ \public\locales\pages\index.ts
✔ _+ \public\locales\pages\index.ts
✔ ++ \public\locales\metadatas\cv.metadata.ts
✔ _+ \public\locales\metadatas\index.ts
✔ _+ \public\locales\metadatas\index.ts
Done in 13.43s.This script will generate all content for a new component
yarn generate // choose ✏️ Component
> Component name ? // Enter the name of the component
> Component required a dedicated translation ? // Your component will have his own translation and not import by another component or page
> Component required a dedicated behavior ? // Your component need a dedicated behavior like a hook to split it between render and features
> Is a client Component ? // Your component will be generated in the client interfaceExample
λ yarn generate
yarn run v1.22.19
$ plop
? [PLOP] Please choose a generator. ✏️ Component - Create a reusable component
? Component name ? Footer
? Component required a dedicated translation ? Yes
? Component required a dedicated behavior ? Yes
? Is a client Component ? Yes
✔ ++ \src\components\footer\index.tsx
✔ ++ \src\components\footer\__tests__\index.test.tsx
✔ ++ \src\components\footer\behavior.tsx
✔ ++ \src\components\footer\__tests__\behavior.test.tsx
✔ ++ \public\locales\components\footer.component.ts
✔ _+ \public\locales\components\index.ts
✔ _+ \public\locales\components\index.ts
Done in 15.58s.This script will generate all content for a new UI element like button design or link ...
yarn generate // choose 🎨 UI
> UI element name ? // Enter the name of the ui elementExample
λ yarn generate
yarn run v1.22.19
$ plop
? [PLOP] Please choose a generator. 🎨 UI - Create a reusable UI element
? UI element name ? link
✔ ++ \src\ui\link\index.tsx
✔ ++ \src\ui\link\design.tsx
Done in 7.54s.Clone this repository on own GitHub account and deploy to Netlify:
- 🗹 Setup project
- ☐ Use plop-generator
- ☐ Write specific documentations