Next.js Structure

All information mentioned in Pages & Routes (Common Concepts) applies.

• App Router (Preferred)
  Use the app/ directory for routing in new projects. Each route file under app/ is a page, where you should apply the rules above (composition, headings, layout, etc.).
• Pages Router (Legacy)
  The pages/ directory can still be used in existing projects. Keep the standard structure, and remember:
  • Business logic for SSR/SSG (getServerSideProps, getStaticProps) must remain in the pages/ directory, as it won’t work elsewhere.

Example Structure

• Directorysrc/

  • Directoryapp/

    • Directoryposts/

      • page.tsx # Page component that composes feature widgets
  • Directoryfeatures/

    • Directoryposts/

      • Directorycomponents/ # Posts-specific components

        • PostList.tsx # Posts list component
      • Directoryhooks/ # Posts-specific hooks

        • …