idmo/nextjs_tailwindcss_storybook_sandbox

Next js React Web Project Template (Typescript, Sass, Tailwind Css, SVGR, Prettier, Storybook, SEO, On-Demand ISR pre-configs 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.
• Easy SEO management with next-seo
  • Automatic Sitemap generation with next-sitemap.
• Next js On-Demand ISR
  • Next js On-demand Incremental Static Regeneration api config to revalidate static stale pages on demand.
• Conventional Commits Linting - Set of rules for enforcing creation of more human and machine-readable explicit commits.
• Absolute imports. See Additional notes section.

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.

Additional notes about the template

Absolute imports have been configured in tsconfig.json

{
  "compilerOptions": {
    //...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
  //...
}

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
  ...📄 {Component}.tsx
  ...📂 {page}
     ...📄 {Component}.tsx

📂 lib
  📂 data
    ...📄 {service}.ts
  📂 types
    ...📄 {type}.ts

📂 pages
  📂 api
    ...📄 {apiPath}.ts
  _app.tsx ?
  _document.tsx ?
  ...📄 {path}.ts

📂 public
  📂 icons
  📂 images
  📄 favicon.ico
  📄 robots.txt
  
📂 stories
  ...📄 {Component}.stories.tsx
  ...📂 {page}
     ...📄 {Component}.stories.tsx

📂 styles
  📄 globals.scss

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.