status: 'draft' keyword: 'nextjs', 'tailwindcss'

About this website

🐵 TL'DR

• 🏗 Built with NextJS
• 🎨 Custom theme powered by TailwindCSS
• 🧰 Unstyled and accessible UI components with Headless-UI
• 🌗 Dark mode featured by next-theme
• 🎣 Performant, flexible and extensible forms with React Hook Form
• 🐻 UI State management with Zustand
• 🌸 Data management and Sync with React-Query
• 🥸 API Mocking with mswjs
• 🤖 SEO support with next-seo
• 🔒 JWT Authentication with next-auth
• 🧩 Uncontextualized component visualization with Storybook
• 🚨 Testing powered by jest
• 🐙 Component Testing powered by React Testing Library
• 🐳 Container-based deployment host powered by Docker

---

Framework

The React Framework for Production Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.

---

UI

• TailwindCSS

---

Directory structure

pages/
public/
src/
└── components/
    └── Post/
        ├── Article.tsx
        ├── Author.tsx
        ├── Card.tsx
        ├── Comments.tsx
        ├── Post.tsx
        ├── Post.helpers.ts
        ├── Seo.tsx
        ├── Tags.tsx
        ├── index.tsx
    └── Widget/
        ├── index.tsx
        └── Widget.tsx
└── constants/index.js
└── helpers/
    └── auth.helpers.ts
└── hooks/
    └── use-name.hook.tsx
└── layouts/
    └── Default.tsx
└── styles/globsl.css
└── types/
└── utils/index.js

Component/index.ts:

export * from './Component';
export { default } from './Component';

Component/Component.tsx:

function Component({ title }) {
  /* Component stuff here */
}
export default Component;

Related resources

• Delightful React File/Directory Structure by Josh W. Comeau

---

Content Creation

---

SEO

Next SEO is a plugin that makes managing your SEO easier in Next.js projects.