Skip to main content

Project Structure

Discover Niwi-Starter in less than 10 minutes.

Structure​

Page Routes​

Niwi uses the app-router and group-route folder structure in Next.js.

The app directory contains page and layout files, along with (feat) and (protected) folders. The (feat) folder is for general users, while the (protected) folder is for authenticated users.

Components​

Explore Niwi components, and create your own within the components directory. Niwi uses Tailwind for basic styling, but you can add libraries like Radix or Shadcn UI to customize your project further.

Utilities​

This section contains helper functions for libraries like Stripe, Mailgun, and authentication.

Schema with Prisma​

Niwi uses MongoDB with Prisma. You can create your own models in the prisma/schema.prisma file.

Seeding​

The seeds folder contains pre-defined data for default features and users, used for seeding.

Styling​

You can modify existing Niwi component styles or add your own CSS in globals.css. Tailwind is the primary styling framework used for components.

State Management with Zustand​

We use Zustand for client-side state management. However, you can replace it with another library if needed.

Core Feature Structure​

Niwi includes default and project-specific features in the feat directory. Our philosophy emphasizes separating business logic in feat to reduce complexity in Next.js.

Each feature follows an organized structure with directories for services, actions, validations, api, and hooks to promote reusability.

Explore the detailed structure of our features below!

Feature Detail Structure​

The blog feature is an example created for learning purposes.

  • actions: Server Actions with "use server"
  • api: Primarily uses useQuery, useMutation, and useInfiniteQuery from Tanstack Query
  • hooks: Custom hooks for feature-specific reusability
  • validations: Validations with Zod for both client and server-side actions
  • services: Services for specific features, applicable on both server and client sides

In the `blog.service`, we use `import "server-only"` to ensure functions run only on the server. The `blog-query-cache` service is used for React Query on the client side.

Folder Structure Tree​

You can click and open the file tree.

Packages and Libraries Used​

Niwi-Starter is built using the following packages and libraries: