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.

Quick Start

Start using this template with Create Next App.

yarn 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.

Scripts

Run the development server

yarn dev

Building for production

yarn build

Run in production mode

yarn start

Run Storybook server

yarn storybook

Build Storybook as a static web application

yarn build-storybook

Project directory structure

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

Project's main tech stack useful resources

React

• 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).

Next.js

• 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 Css

• Tailwind Docs - Tailwind Css official documentation and reference.
• Tailwind with Next.js guide - Tailwind installation guide with Next.js.

Typescript

• W3Schools Typescript tutorial - Step-by-step guide to learning Typescript.