--- title: Next.js Project Structure description: A list of folders and files conventions in a Next.js project url: "https://nextjs.org/docs/14/getting-started/project-structure" version: 14.2.35 lastUpdated: 2024-02-10 prerequisites: - "Getting Started: /docs/14/getting-started" --- This page provides an overview of the file and folder structure of a Next.js project. It covers top-level files and folders, configuration files, and routing conventions within the `app` and `pages` directories. ## Top-level folders | | | | ------------------------------------------------------------------------ | ---------------------------------- | | [`app`](/docs/app/building-your-application/routing) | App Router | | [`pages`](/docs/pages/building-your-application/routing) | Pages Router | | [`public`](/docs/app/building-your-application/optimizing/static-assets) | Static assets to be served | | [`src`](/docs/app/building-your-application/configuring/src-directory) | Optional application source folder | ## Top-level files | | | | ------------------------------------------------------------------------------------------- | --------------------------------------- | | **Next.js** | | | [`next.config.js`](/docs/app/api-reference/next-config-js) | Configuration file for Next.js | | [`package.json`](/docs/getting-started/installation#manual-installation) | Project dependencies and scripts | | [`instrumentation.ts`](/docs/app/building-your-application/optimizing/instrumentation) | OpenTelemetry and Instrumentation file | | [`middleware.ts`](/docs/app/building-your-application/routing/middleware) | Next.js request middleware | | [`.env`](/docs/app/building-your-application/configuring/environment-variables) | Environment variables | | [`.env.local`](/docs/app/building-your-application/configuring/environment-variables) | Local environment variables | | [`.env.production`](/docs/app/building-your-application/configuring/environment-variables) | Production environment variables | | [`.env.development`](/docs/app/building-your-application/configuring/environment-variables) | Development environment variables | | [`.eslintrc.json`](/docs/app/building-your-application/configuring/eslint) | Configuration file for ESLint | | `.gitignore` | Git files and folders to ignore | | `next-env.d.ts` | TypeScript declaration file for Next.js | | `tsconfig.json` | Configuration file for TypeScript | | `jsconfig.json` | Configuration file for JavaScript | ## `app` Routing Conventions ### Routing Files | | | | | ------------------------------------------------------------------------------- | ------------------- | ---------------------------- | | [`layout`](/docs/app/api-reference/file-conventions/layout) | `.js` `.jsx` `.tsx` | Layout | | [`page`](/docs/app/api-reference/file-conventions/page) | `.js` `.jsx` `.tsx` | Page | | [`loading`](/docs/app/api-reference/file-conventions/loading) | `.js` `.jsx` `.tsx` | Loading UI | | [`not-found`](/docs/app/api-reference/file-conventions/not-found) | `.js` `.jsx` `.tsx` | Not found UI | | [`error`](/docs/app/api-reference/file-conventions/error) | `.js` `.jsx` `.tsx` | Error UI | | [`global-error`](/docs/app/api-reference/file-conventions/error#global-errorjs) | `.js` `.jsx` `.tsx` | Global error UI | | [`route`](/docs/app/api-reference/file-conventions/route) | `.js` `.ts` | API endpoint | | [`template`](/docs/app/api-reference/file-conventions/template) | `.js` `.jsx` `.tsx` | Re-rendered layout | | [`default`](/docs/app/api-reference/file-conventions/default) | `.js` `.jsx` `.tsx` | Parallel route fallback page | ### Nested Routes | | | | ---------------------------------------------------------------------------- | -------------------- | | [`folder`](/docs/app/building-your-application/routing#route-segments) | Route segment | | [`folder/folder`](/docs/app/building-your-application/routing#nested-routes) | Nested route segment | ### Dynamic Routes | | | | --------------------------------------------------------------------------------------------------------- | -------------------------------- | | [`[folder]`](/docs/app/building-your-application/routing/dynamic-routes#convention) | Dynamic route segment | | [`[...folder]`](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments) | Catch-all route segment | | [`[[...folder]]`](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | Optional catch-all route segment | ### Route Groups and Private Folders | | | | ----------------------------------------------------------------------------------- | ------------------------------------------------ | | [`(folder)`](/docs/app/building-your-application/routing/route-groups#convention) | Group routes without affecting routing | | [`_folder`](/docs/app/building-your-application/routing/colocation#private-folders) | Opt folder and all child segments out of routing | ### Parallel and Intercepted Routes | | | | ---------------------------------------------------------------------------------------------- | -------------------------- | | [`@folder`](/docs/app/building-your-application/routing/parallel-routes#convention) | Named slot | | [`(.)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention) | Intercept same level | | [`(..)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention) | Intercept one level above | | [`(..)(..)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention) | Intercept two levels above | | [`(...)folder`](/docs/app/building-your-application/routing/intercepting-routes#convention) | Intercept from root | ### Metadata File Conventions #### App Icons | | | | | --------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ------------------------ | | [`favicon`](/docs/app/api-reference/file-conventions/metadata/app-icons#favicon) | `.ico` | Favicon file | | [`icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#icon) | `.ico` `.jpg` `.jpeg` `.png` `.svg` | App Icon file | | [`icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx) | `.js` `.ts` `.tsx` | Generated App Icon | | [`apple-icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#apple-icon) | `.jpg` `.jpeg`, `.png` | Apple App Icon file | | [`apple-icon`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx) | `.js` `.ts` `.tsx` | Generated Apple App Icon | #### Open Graph and Twitter Images | | | | | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------- | | [`opengraph-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#opengraph-image) | `.jpg` `.jpeg` `.png` `.gif` | Open Graph image file | | [`opengraph-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx) | `.js` `.ts` `.tsx` | Generated Open Graph image | | [`twitter-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#twitter-image) | `.jpg` `.jpeg` `.png` `.gif` | Twitter image file | | [`twitter-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx) | `.js` `.ts` `.tsx` | Generated Twitter image | #### SEO | | | | | ------------------------------------------------------------------------------------------------------------ | ----------- | --------------------- | | [`sitemap`](/docs/app/api-reference/file-conventions/metadata/sitemap#sitemap-files-xml) | `.xml` | Sitemap file | | [`sitemap`](/docs/app/api-reference/file-conventions/metadata/sitemap#generating-a-sitemap-using-code-js-ts) | `.js` `.ts` | Generated Sitemap | | [`robots`](/docs/app/api-reference/file-conventions/metadata/robots#static-robotstxt) | `.txt` | Robots file | | [`robots`](/docs/app/api-reference/file-conventions/metadata/robots#generate-a-robots-file) | `.js` `.ts` | Generated Robots file | ## `pages` Routing Conventions ### Special Files | | | | | ----------------------------------------------------------------------------------------------------------- | ------------------- | ----------------- | | [`_app`](/docs/pages/building-your-application/routing/custom-app) | `.js` `.jsx` `.tsx` | Custom App | | [`_document`](/docs/pages/building-your-application/routing/custom-document) | `.js` `.jsx` `.tsx` | Custom Document | | [`_error`](/docs/pages/building-your-application/routing/custom-error#more-advanced-error-page-customizing) | `.js` `.jsx` `.tsx` | Custom Error Page | | [`404`](/docs/pages/building-your-application/routing/custom-error#404-page) | `.js` `.jsx` `.tsx` | 404 Error Page | | [`500`](/docs/pages/building-your-application/routing/custom-error#500-page) | `.js` `.jsx` `.tsx` | 500 Error Page | ### Routes | | | | | ---------------------------------------------------------------------------------------------- | ------------------- | ----------- | | **Folder convention** | | | | [`index`](/docs/pages/building-your-application/routing/pages-and-layouts#index-routes) | `.js` `.jsx` `.tsx` | Home page | | [`folder/index`](/docs/pages/building-your-application/routing/pages-and-layouts#index-routes) | `.js` `.jsx` `.tsx` | Nested page | | **File convention** | | | | [`index`](/docs/pages/building-your-application/routing/pages-and-layouts#index-routes) | `.js` `.jsx` `.tsx` | Home page | | [`file`](/docs/pages/building-your-application/routing/pages-and-layouts) | `.js` `.jsx` `.tsx` | Nested page | ### Dynamic Routes | | | | | ----------------------------------------------------------------------------------------------------------------- | ------------------- | -------------------------------- | | **Folder convention** | | | | [`[folder]/index`](/docs/pages/building-your-application/routing/dynamic-routes) | `.js` `.jsx` `.tsx` | Dynamic route segment | | [`[...folder]/index`](/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) | `.js` `.jsx` `.tsx` | Catch-all route segment | | [`[[...folder]]/index`](/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | `.js` `.jsx` `.tsx` | Optional catch-all route segment | | **File convention** | | | | [`[file]`](/docs/pages/building-your-application/routing/dynamic-routes) | `.js` `.jsx` `.tsx` | Dynamic route segment | | [`[...file]`](/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments) | `.js` `.jsx` `.tsx` | Catch-all route segment | | [`[[...file]]`](/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | `.js` `.jsx` `.tsx` | Optional catch-all route segment | --- For an index of all available documentation, see [/docs/14/llms.txt](/docs/14/llms.txt)