{"id":1330,"date":"2024-09-18T15:21:05","date_gmt":"2024-09-18T08:21:05","guid":{"rendered":"https:\/\/insideofcode.com\/blog\/?p=1330"},"modified":"2024-09-18T15:21:06","modified_gmt":"2024-09-18T08:21:06","slug":"best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration","status":"publish","type":"post","link":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/","title":{"rendered":"Best Project Structure for Next.js App Router: A Guide for Easy Collaboration"},"content":{"rendered":"\n

Building a scalable and maintainable Next.js project requires a clear structure, especially when multiple developers are involved. The introduction of the App Router<\/strong> in Next.js 13+ offers new possibilities for organizing routes and components. In this article, we\u2019ll explore the best practices for structuring a Next.js project that enhances collaboration and maintainability.<\/p>\n\n\n\n

1. Project Root Structure<\/strong><\/h2>\n\n\n\n

The root directory sets the foundation for the entire project. It contains essential configuration files and separates core folders like components, styles, and public assets. Here\u2019s a clean and collaborative-friendly structure:<\/p>\n\n\n\n

\/project-root\n  \u251c\u2500\u2500 \/app             # The app directory for the App Router\n  \u251c\u2500\u2500 \/public          # Static assets like images and favicons\n  \u251c\u2500\u2500 \/components      # Reusable components shared across the project\n  \u251c\u2500\u2500 \/hooks           # Custom React hooks\n  \u251c\u2500\u2500 \/utils           # Utility functions (e.g., helpers, API wrappers)\n  \u251c\u2500\u2500 \/context         # Global state management via React context\n  \u251c\u2500\u2500 \/middleware      # API and security-related middleware\n  \u251c\u2500\u2500 \/types           # TypeScript interfaces and type definitions\n  \u251c\u2500\u2500 \/styles          # Global and component-level CSS or SCSS files\n  \u251c\u2500\u2500 .eslintrc.json   # ESLint configuration for linting\n  \u251c\u2500\u2500 .prettierrc      # Prettier configuration for code formatting\n  \u251c\u2500\u2500 package.json     # Project dependencies and scripts\n  \u251c\u2500\u2500 next.config.js   # Next.js configuration\n  \u2514\u2500\u2500 tsconfig.json    # TypeScript configuration (if using TypeScript)<\/code><\/pre>\n\n\n\n
Key Folders Breakdown:<\/h3>\n\n\n\n
    \n
  • \/app<\/code><\/strong>: This is the central directory for Next.js App Router<\/strong>. It handles pages and routes more flexibly than the previous \/pages<\/code><\/strong> folder by using file-based layouts and server-side features.<\/li>\n\n\n\n
  • \/public<\/code><\/strong>: Contains all static files, such as images, favicons, and other assets that don’t change during the build.<\/li>\n\n\n\n
  • \/components<\/code><\/strong>: Houses reusable components like buttons, modals, forms, or any other UI elements that can be shared across different pages.<\/li>\n\n\n\n
  • \/hooks<\/code><\/strong>: Custom React hooks to keep logic reusable and clean. For example, you might place hooks like useAuth<\/code> or useFetchData<\/code> here.<\/li>\n\n\n\n
  • \/utils<\/code><\/strong>: Store utility functions that are not tied to a specific component but are used globally, such as formatting or API helper functions.<\/li>\n\n\n\n
  • \/context<\/code><\/strong>: Contains context providers for managing global states, such as user authentication or theme context.<\/li>\n\n\n\n
  • \/middleware<\/code><\/strong>: This folder can house middleware functions that interact with Next.js API routes or handle request logging and security.<\/li>\n\n\n\n
  • \/types<\/code><\/strong>: For TypeScript users, this folder is crucial for maintaining a clear and concise set of types and interfaces that can be shared across the project.<\/li>\n\n\n\n
  • \/styles<\/code><\/strong>: CSS, SCSS, or even Tailwind configurations for global styling and component-specific stylesheets.<\/li>\n<\/ul>\n\n\n\n
    2. The app<\/code> Directory for App Router<\/strong><\/h2>\n\n\n\n
    The App Router<\/strong> directory structure encourages modularity and better route management. Let\u2019s break down a typical layout:<\/p>\n\n\n\n
    \/app\n  \u251c\u2500\u2500 \/api               # API routes for server-side functions\n  \u251c\u2500\u2500 \/(routes)          # Parenthesized folders group related routes\n  \u251c\u2500\u2500 \/dashboard         # Example route folder for `\/dashboard`\n  \u2502   \u251c\u2500\u2500 page.tsx       # Page-level component for `\/dashboard`\n  \u2502   \u251c\u2500\u2500 layout.tsx     # Optional layout file for `\/dashboard`\n  \u251c\u2500\u2500 \/auth              # Route folder for authentication pages\n  \u2502   \u251c\u2500\u2500 page.tsx       # Page-level component for `\/auth`\n  \u2514\u2500\u2500 layout.tsx         # Global layout wrapping all routes\n  \u2514\u2500\u2500 page.tsx           # Root-level page component (for `\/`)<\/code><\/pre>\n\n\n\n
    Key Features of the App Router Structure:<\/h4>\n\n\n\n
      \n
    • \/api<\/code><\/strong>: This folder contains API routes that are server-side functions. They are ideal for handling backend logic like fetching data from databases or third-party APIs.<\/li>\n\n\n\n
    • \/dashboard<\/code>, \/auth<\/code>, etc.<\/strong>: Route folders are intuitive and follow the folder-based routing principle. Each folder can represent a page in your app.\n
        \n
      • page.tsx<\/code><\/strong>: The actual page component for a route. For example, page.tsx<\/code> inside \/dashboard<\/code> renders the content for the \/dashboard<\/code> route.<\/li>\n\n\n\n
      • layout.tsx<\/code><\/strong>: You can define layouts that wrap multiple routes or specific sections. These layouts are powerful for ensuring a consistent look and feel across your app, especially in large applications.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • layout.tsx<\/code> at the root<\/strong>: This defines the global layout for all routes in the app. It typically wraps things like headers, footers, and other elements that are shared across all pages.<\/li>\n<\/ul>\n\n\n\n
        3. Supporting Folders for Collaboration<\/strong><\/h2>\n\n\n\n
        In addition to the core app<\/strong> directory, it\u2019s important to set up auxiliary folders for a more efficient workflow:<\/p>\n\n\n\n
        Components<\/strong><\/h3>\n\n\n\n
        Reusable components, such as buttons, modals, or input fields, should be organized here. Each component should be self-contained, with its own styles and logic, making it easier for team members to contribute to or update individual components without affecting the entire project.<\/p>\n\n\n\n
        Hooks<\/strong><\/h3>\n\n\n\n
        Custom hooks provide reusable logic, reducing duplication across components. By placing all hooks in a dedicated folder, you keep the project organized and prevent scattering logic across unrelated components.<\/p>\n\n\n\n
        Utils<\/strong><\/h3>\n\n\n\n
        This is where utility functions, such as API wrappers, formatters, or helpers, should reside. Keeping these utilities in one place improves code readability and helps collaborators find reusable logic easily.<\/p>\n\n\n\n
        Types<\/strong><\/h3>\n\n\n\n
        For TypeScript users, maintaining a dedicated types<\/code> folder helps standardize and share interfaces, enums, and types across the codebase, improving type safety and reducing duplication.<\/p>\n\n\n\n
        4. Best Practices for Collaboration<\/strong><\/h2>\n\n\n\n
        Now that you have a well-structured project, here are some collaboration tips to make teamwork seamless:<\/p>\n\n\n\n
        Use Clear Naming Conventions<\/strong><\/h3>\n\n\n\n
        Every component, hook, or utility should have a meaningful and consistent name that reflects its purpose. Avoid generic names like Helper.js<\/code>\u2014be specific so that anyone in the team can quickly understand what each file does.<\/p>\n\n\n\n
        Leverage Git Branching and Pull Requests<\/strong><\/h3>\n\n\n\n
        Adopt a Git workflow where each feature or bug fix gets its own branch. Use pull requests for code reviews and ensure that code is merged into the main branch only after passing tests and reviews. This approach minimizes conflicts and ensures that quality standards are maintained.<\/p>\n\n\n\n
        Use ESLint and Prettier for Code Consistency<\/strong><\/h3>\n\n\n\n
        Setting up ESLint<\/strong> for linting and Prettier<\/strong> for formatting ensures that everyone\u2019s code adheres to the same style guide, making it easier to read and review code from different team members.<\/p>\n\n\n\n
        Implement CI\/CD for Automated Testing<\/strong><\/h3>\n\n\n\n
        Automating tests through a continuous integration\/continuous deployment (CI\/CD) pipeline ensures that new code is tested before being merged. This reduces the risk of breaking the app with untested code.<\/p>\n\n\n\n
        Conclusion<\/h2>\n\n\n\n
        A well-structured Next.js project, especially one that uses the App Router<\/strong>, can significantly improve team collaboration and scalability. By organizing your routes, components, and utilities clearly and following best practices for version control, testing, and code formatting, you ensure that every developer can easily navigate and contribute to the project.<\/p>\n\n\n\n
        With this structure, your team will be set up for long-term success, no matter how complex your Next.js project becomes.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Building a scalable and maintainable Next.js project requires a clear structure, especially when multiple developers are involved. The introduction of the App Router in Next.js 13+ offers new possibilities for organizing routes and components. In this article, we\u2019ll explore the best practices for structuring a Next.js project that enhances collaboration and maintainability. 1. Project Root […]<\/p>\n","protected":false},"author":1,"featured_media":1332,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[261,292,196],"tags":[300,334],"class_list":["post-1330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-framework-en","category-javascript-en","category-javascript","tag-frontend","tag-nextjs"],"blocksy_meta":[],"yoast_head":"\nBest Project Structure for Next.js App Router: A Guide for Easy Collaboration - Inside of Code<\/title>\n<meta name=\"description\" content=\"Learn the ideal Next.js project structure using App Router to enhance team collaboration and maintainability.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best Project Structure for Next.js App Router: A Guide for Easy Collaboration - Inside of Code\" \/>\n<meta property=\"og:description\" content=\"Learn the ideal Next.js project structure using App Router to enhance team collaboration and maintainability.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/\" \/>\n<meta property=\"og:site_name\" content=\"Inside of Code\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-18T08:21:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-18T08:21:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/insideofcode.com\/wp-content\/uploads\/2024\/09\/best-project-structure-for-next.js-app-router.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Dani\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dani\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/\"},\"author\":{\"name\":\"Dani\",\"@id\":\"https:\/\/insideofcode.com\/blog\/#\/schema\/person\/1c6cafc6659067aa7ac1fd1a5ced218d\"},\"headline\":\"Best Project Structure for Next.js App Router: A Guide for Easy Collaboration\",\"datePublished\":\"2024-09-18T08:21:05+00:00\",\"dateModified\":\"2024-09-18T08:21:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/\"},\"wordCount\":844,\"publisher\":{\"@id\":\"https:\/\/insideofcode.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/insideofcode.com\/wp-content\/uploads\/2024\/09\/best-project-structure-for-next.js-app-router.webp\",\"keywords\":[\"frontend\",\"nextjs\"],\"articleSection\":[\"Framework\",\"Javascript\",\"Javascript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/\",\"url\":\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/\",\"name\":\"Best Project Structure for Next.js App Router: A Guide for Easy Collaboration - Inside of Code\",\"isPartOf\":{\"@id\":\"https:\/\/insideofcode.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/insideofcode.com\/wp-content\/uploads\/2024\/09\/best-project-structure-for-next.js-app-router.webp\",\"datePublished\":\"2024-09-18T08:21:05+00:00\",\"dateModified\":\"2024-09-18T08:21:06+00:00\",\"description\":\"Learn the ideal Next.js project structure using App Router to enhance team collaboration and maintainability.\",\"breadcrumb\":{\"@id\":\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#primaryimage\",\"url\":\"https:\/\/insideofcode.com\/wp-content\/uploads\/2024\/09\/best-project-structure-for-next.js-app-router.webp\",\"contentUrl\":\"https:\/\/insideofcode.com\/wp-content\/uploads\/2024\/09\/best-project-structure-for-next.js-app-router.webp\",\"width\":1200,\"height\":675,\"caption\":\"Best project structure for nextjs app router\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/insideofcode.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Best Project Structure for Next.js App Router: A Guide for Easy Collaboration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/insideofcode.com\/blog\/#website\",\"url\":\"https:\/\/insideofcode.com\/blog\/\",\"name\":\"Inside of Code\",\"description\":\"A software engineer who wants to share what he has learned, and document his journey.\",\"publisher\":{\"@id\":\"https:\/\/insideofcode.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/insideofcode.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/insideofcode.com\/blog\/#organization\",\"name\":\"Inside of Code\",\"url\":\"https:\/\/insideofcode.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/insideofcode.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/insideofcode.com\/wp-content\/uploads\/2022\/10\/logo-ioc.png\",\"contentUrl\":\"https:\/\/insideofcode.com\/wp-content\/uploads\/2022\/10\/logo-ioc.png\",\"width\":324,\"height\":324,\"caption\":\"Inside of Code\"},\"image\":{\"@id\":\"https:\/\/insideofcode.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/insideofcode.com\/blog\/#\/schema\/person\/1c6cafc6659067aa7ac1fd1a5ced218d\",\"name\":\"Dani\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/insideofcode.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a4b1e4251720747aef0418e09fe0f6e7786ff89358b57f76822f1c52c286552b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a4b1e4251720747aef0418e09fe0f6e7786ff89358b57f76822f1c52c286552b?s=96&d=mm&r=g\",\"caption\":\"Dani\"},\"sameAs\":[\"https:\/\/insideofcode.com\/blog\"],\"url\":\"https:\/\/insideofcode.com\/blog\/author\/daniwork\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Best Project Structure for Next.js App Router: A Guide for Easy Collaboration - Inside of Code","description":"Learn the ideal Next.js project structure using App Router to enhance team collaboration and maintainability.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/","og_locale":"en_US","og_type":"article","og_title":"Best Project Structure for Next.js App Router: A Guide for Easy Collaboration - Inside of Code","og_description":"Learn the ideal Next.js project structure using App Router to enhance team collaboration and maintainability.","og_url":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/","og_site_name":"Inside of Code","article_published_time":"2024-09-18T08:21:05+00:00","article_modified_time":"2024-09-18T08:21:06+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/insideofcode.com\/wp-content\/uploads\/2024\/09\/best-project-structure-for-next.js-app-router.webp","type":"image\/webp"}],"author":"Dani","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dani","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#article","isPartOf":{"@id":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/"},"author":{"name":"Dani","@id":"https:\/\/insideofcode.com\/blog\/#\/schema\/person\/1c6cafc6659067aa7ac1fd1a5ced218d"},"headline":"Best Project Structure for Next.js App Router: A Guide for Easy Collaboration","datePublished":"2024-09-18T08:21:05+00:00","dateModified":"2024-09-18T08:21:06+00:00","mainEntityOfPage":{"@id":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/"},"wordCount":844,"publisher":{"@id":"https:\/\/insideofcode.com\/blog\/#organization"},"image":{"@id":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#primaryimage"},"thumbnailUrl":"https:\/\/insideofcode.com\/wp-content\/uploads\/2024\/09\/best-project-structure-for-next.js-app-router.webp","keywords":["frontend","nextjs"],"articleSection":["Framework","Javascript","Javascript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/","url":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/","name":"Best Project Structure for Next.js App Router: A Guide for Easy Collaboration - Inside of Code","isPartOf":{"@id":"https:\/\/insideofcode.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#primaryimage"},"image":{"@id":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#primaryimage"},"thumbnailUrl":"https:\/\/insideofcode.com\/wp-content\/uploads\/2024\/09\/best-project-structure-for-next.js-app-router.webp","datePublished":"2024-09-18T08:21:05+00:00","dateModified":"2024-09-18T08:21:06+00:00","description":"Learn the ideal Next.js project structure using App Router to enhance team collaboration and maintainability.","breadcrumb":{"@id":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#primaryimage","url":"https:\/\/insideofcode.com\/wp-content\/uploads\/2024\/09\/best-project-structure-for-next.js-app-router.webp","contentUrl":"https:\/\/insideofcode.com\/wp-content\/uploads\/2024\/09\/best-project-structure-for-next.js-app-router.webp","width":1200,"height":675,"caption":"Best project structure for nextjs app router"},{"@type":"BreadcrumbList","@id":"https:\/\/insideofcode.com\/blog\/best-project-structure-for-next-js-app-router-a-guide-for-easy-collaboration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/insideofcode.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Best Project Structure for Next.js App Router: A Guide for Easy Collaboration"}]},{"@type":"WebSite","@id":"https:\/\/insideofcode.com\/blog\/#website","url":"https:\/\/insideofcode.com\/blog\/","name":"Inside of Code","description":"A software engineer who wants to share what he has learned, and document his journey.","publisher":{"@id":"https:\/\/insideofcode.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/insideofcode.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/insideofcode.com\/blog\/#organization","name":"Inside of Code","url":"https:\/\/insideofcode.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/insideofcode.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/insideofcode.com\/wp-content\/uploads\/2022\/10\/logo-ioc.png","contentUrl":"https:\/\/insideofcode.com\/wp-content\/uploads\/2022\/10\/logo-ioc.png","width":324,"height":324,"caption":"Inside of Code"},"image":{"@id":"https:\/\/insideofcode.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/insideofcode.com\/blog\/#\/schema\/person\/1c6cafc6659067aa7ac1fd1a5ced218d","name":"Dani","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/insideofcode.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a4b1e4251720747aef0418e09fe0f6e7786ff89358b57f76822f1c52c286552b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a4b1e4251720747aef0418e09fe0f6e7786ff89358b57f76822f1c52c286552b?s=96&d=mm&r=g","caption":"Dani"},"sameAs":["https:\/\/insideofcode.com\/blog"],"url":"https:\/\/insideofcode.com\/blog\/author\/daniwork\/"}]}},"_links":{"self":[{"href":"https:\/\/insideofcode.com\/blog\/wp-json\/wp\/v2\/posts\/1330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/insideofcode.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/insideofcode.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/insideofcode.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/insideofcode.com\/blog\/wp-json\/wp\/v2\/comments?post=1330"}],"version-history":[{"count":0,"href":"https:\/\/insideofcode.com\/blog\/wp-json\/wp\/v2\/posts\/1330\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/insideofcode.com\/blog\/wp-json\/wp\/v2\/media\/1332"}],"wp:attachment":[{"href":"https:\/\/insideofcode.com\/blog\/wp-json\/wp\/v2\/media?parent=1330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/insideofcode.com\/blog\/wp-json\/wp\/v2\/categories?post=1330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/insideofcode.com\/blog\/wp-json\/wp\/v2\/tags?post=1330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}