Reading time: 5 min read
Start typing to search...
Discover how to unleash the full potential of Sitecore XM Cloud by implementing a streamlined and adaptable folder hierarchy for your Next.js project. Based on industry best practices, our guide will show you how to incorporate Tailwind CSS, TypeScript, Storybook, and GraphQL into your development workflow, resulting in a more efficient and effective project management process.
Having a well-structured folder hierarchy is essential to keep your project organized and scalable. Here's a high-level overview of the recommended folder structure:
- companyx-nextjs/
- src/ (Source code directory)
- app/
- components/ (Components directory)
-shared/
-ComponentName.tsx
-componentName/
-ComponentName.tsx
- utils/ (Utility functions directory)
-calculate-tools.ts
-custom-helper.tsx
- hooks/
-useCustomHook.tsx
- types/
-type.ts
- graphql/ (GraphQL-related code directory)
-user-query.ts
- ... (Additional directories as needed)
- pages/ (Next.js pages directory)
-about-us-page.tsx
- styles/ (Stylesheets directory contain any global styles or custom CSS )
- stories/
- assets/
- ... (Additional application directories if necessary)
- public/ (Public directory for static assets)
- ...
- next.config.js (Next.js configuration file)
- tailwind.config.js (Tailwind CSS configuration file)
- postcss.config.js (PostCSS configuration file)
- tsconfig.json (TypeScript configuration file)
- package.json (Project dependencies and scripts)
- ...
It's essential to use a src/ directory as the core of your application to ensure proper project organization. This directory should have GraphQL queries, global styles, assets, and TypeScript types subfolders. The advantages of utilizing a src/ directory include a cleaner project root, more straightforward navigation, better code isolation, and compatibility with specific tools and configurations. Separating your source files in a directory is crucial to keep your project root folder tidy and avoid cluttering it with various files. This approach also makes your project more manageable and maintainable in the long run.
The app folder provides a clear and structured foundation for the core application code, fostering better development practices, promoting code reusability, and facilitating a more maintainable and scalable Next.js project on Sitecore XM Cloud.
It's a good practice to have a shared folder and separate folders for each component in the components folder. Here's why:
utils folder can help improve code organization and maintainability. By grouping common functionalities together, you can enhance code reusability and make it easier to find and reference specific functions when needed.hooks folder. This way, you can easily reference and reuse them throughout your project.graphql folder, GraphQL-related code, such as queries and mutations, is centralized, enabling clear separation of concerns and streamlining data interactions with the backend.Organize your pages in Next.js by grouping them logically within the pages folder to ensure a seamless user experience.
Here's how the requested pages can be organized within the pages/ folder of your Next.js project:
- pages/
- index.tsx
- about.tsx
- products/
- index.tsx
- [productId].tsx
The styles folder contains global styles or custom CSS files for the Next.js project, allowing consistent styling across components and pages.
The stories folder is used with Storybook to store individual stories for components, enabling interactive component development and documentation.
The assets folder holds static assets, such as images, fonts, and other files, that need to be publicly accessible from the browser.
The public folder is where you store static assets such as images, fonts, and other files that need to be directly accessible from the browser.
Developing a successful Next.js project integrated with Tailwind CSS, TypeScript, Storybook, and GraphQL for Sitecore XM Cloud relies on a well-structured folder layout. Embracing this organized approach enhances code organization, readability, and collaboration among team members, ensuring a seamless and productive development process.
By adhering to this recommended folder structure, you'll create web applications with Next.js that are efficient, maintainable, and scalable to meet future needs. So, let's dive in and get coding! Your projects are bound to thrive with this structured foundation in place. Happy coding, and best of luck on your Sitecore XM Cloud journey!