Next.js React Web Project Template (App directory, Typescript, Sass, Tailwind Css, SVGR, Prettier, Storybook, SEO, RSC helpers and other generally used features and tools in production.)
This is a React Next.js project bootstrapped
with create-next-app
.To the default setup
have been added:
- Prettier - Popular opinionated code formatter.
- Sass - Popular Css extension.
- Tailwind Css - Utility-first CSS framework.
Added to utilities such as :
- tailwind-merge Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.
- prettier-plugin-tailwindcss A Prettier plugin that automatically sorts Tailwind classes based on recommended class order.
- Storybook - Frontend workshop for previewing and testing your UI components and pages in isolation.
- SVGR - Tool box for using SVGs in React directly as components like in Create React App.
- Automatic Sitemap generation with next-sitemap.
- Conventional Commits Linting - Set of rules for enforcing the creation of more human and machine-readable explicit commits.
Start using this template with Create Next App.
pnpm dlx create-next-app -e https://github.com/ouedyan/nextjs-template
Then check all TODO sections (by doing a global search for e.g.) to complete the project's setup. You can delete this README and use the simplified README.prod instead in your project.
Run the development server
pnpm dev
Building for production
pnpm build
Run in production mode
pnpm start
Run Storybook server
pnpm storybook
Build Storybook as a static web application
pnpm build-storybook
Main folder structure
📂 components
📂 hooks
utils.ts
...📄 {Component}.tsx
...📂 {page}
...📄 {Component}.tsx
📂 lib
📂 data
...📄 {service}.ts
📂 types
...📄 {type}.ts
📂 utils
...📄 {context}.ts
📂 app
📂 test
📂 api
...📄 {apiPath}.ts
...📄 {path}.ts
layout.tsx
page.client.tsx
page.tsx
not-found.tsx
error.tsx
global-error.tsx
favicon.ico
...📄 favicon-{size}x{size}.png
📄 browserconfig.xml
📄 site.webmanifest
...📄 {other-pwa-assets}
📄 robots.txt
📂 public
📂 favicons
📂 icons
📂 images
📂 stories
📂 examples
...📄 {Component}.stories.tsx
...📂 {page}
...📄 {Component}.stories.tsx
📂 styles
📄 globals.scss
📂 i18n
📂 locales
...📂 {locale}
📄 common.ts
...📄 {namespace}.ts
- W3Schools React tutorial - Step-by-step guide to learning React.
- React new Docs - react official documentation (in beta).
- React old Docs - react official documentation (to be replaced).
- Learn Next.js - the best way to start with next.js if you are new.
- Next.js Docs - learn about Next.js features and API.
- Tailwind Docs - Tailwind Css official documentation and reference.
- Tailwind with Next.js guide - Tailwind installation guide with Next.js.
- W3Schools Typescript tutorial - Step-by-step guide to learning Typescript.