---
title: pages/
sidebar_position: 3
---
# pages/

The identifier for the entry point when the application uses the [`Pages` entry](https://modernjs.dev/v1/docs/guides/usages/entries#pages-%E5%85%A5%E5%8F%A3) type.

:::info
Compatible with Modern.js 1.0 `Pages` entry. It is recommended to use [conventional routing](guides/basic-features/routes.html#conventional-routing).
:::

When the project structure is of the `Pages entry` type, the client-side routing configuration will be obtained by analyzing the files in the `src/pages` directory.

For example, the following directory structure:

```bash
.
└── src
    └── pages
        ├── about
        │   └── index.jsx
        ├── index.jsx
        └── info.jsx
```

The corresponding generated routing configuration is:

```bash
[
  { path: '/', component: 'pages/index.jsx' },
  { path: '/info' component: 'pages/info.jsx' },
  { path: '/about', component: 'pages/about/index.jsx' }
]
```

Files under the pages directory that meet the following conditions will not be treated as routing files:

- Files whose suffix is not `.(j|t)sx?`.
- `.d.ts` type definition files.
- Test files ending in `.test.(j|t)sx?` or `.spec.(j|t)sx?` or `.e2e.(j|t)sx?`.

:::tip
It is recommended to only write entry code in the pages directory and write business logic in the independent features directory outside the pages directory. In this way, most of the files under the pages directory will be routing files, and there is no need for additional filtering rules.

:::

### Dynamic Routing

If the directory name of the route file is named with [], the generated route will be used as a dynamic route.

For example, the following directory structure:

```bash
.
└── src
    └── pages
        ├── [post]
        │   ├── detail.jsx
        │   └── index.js
        ├── users
        │   └── [id].jsx
        ├── index.jsx
        └── info.jsx
```

The corresponding generated routing configuration is:

```js
[
  { path: '/', component: 'pages/index.jsx' },
  { path: '/info', component: 'pages/info.jsx' },
  { path: '/:post/', component: 'pages/[post]/index.js' },
  { path: '/:post/detail' components: 'pages/[post]/detail.jsx'},
  { path: '/users/:id', components: 'pages/users/[id].jsx'}
]
```

On the basis of dynamic routing, special routing suffixes `(*, ?, +)` can be added.

For example: `src/pages/users/[id]*.tsx` will result in the route `/users/:id*`.

### Global Layout

When the entire application needs a global `layout`, it can be achieved through `pages/_app.tsx`. The specific writing method is as follows:

```js
import React from 'react';
import UserLayout from 'xxxx';

export const App = ({Component, ...pageProps}:{ Component: React.ComponentType}) => {
  return (
    <UserLayout>
      <Component {...pageProps} />
    </UserLayout>
  );
}
```

The above `Component` is the component matched when accessing a specific route.

For example, the following directory structure:

```bash
.
└── pages
    ├── a
    │   ├── b
    │   │   └── index.js
    │   └── index.js
    └── index.js
```

- Accessing `/` corresponds to the `Component` component in `pages/index.js`.
- Accessing `/a` corresponds to the `Component` component in `pages/a/index.js`.
- Accessing `/a/b` corresponds to the `Component` component in `pages/a/b/index.js`.

:::tip Advantages of global layout

- Preserve the state of the global layout when the page changes.
- Add global styles.
- ComponentDidCatch error handling.
- Use [defineConfig](/apis/app/runtime/app/define-config) to dynamically configure the runtime configuration.

:::

### Partial Layout

When developing an application, there are scenarios where sub-routes under the same route share a layout.

For this scenario, Modern.js conventionally has a similar effect to global layout when there is `_layout.js` under the directory.

For example, the following directory structure:

```bash
└── pages
    ├── a
    │   ├── b
    │   │   └── index.js
    │   ├── _layout.js
    │   └── index.js
    └── index.js
```

```js title="pages/a/_layout.js"
import React from 'react';

const ALayout = ({ Component, ...pageProps }) => {
  return <Component {...pageProps} />;
};
export default ALayout;
```

The `Component` parameter is the component corresponding to a specific accessed route, for example:

- Accessing `/a` corresponds to the `Component` component in `pages/a/index.js`.
- Accessing `/a/b` corresponds to the `Component` component in `pages/a/b/index.js`.

In this way, `pages/a/_layout.js` can be used to meet the layout needs of shared routes under the `a` directory.

### 404 Route

`pages/404.[tj]sx` is conventionally the default 404 route.

For example, the following directory structure:

```bash
.
└── src
    └── pages
        ├── user.js
        ├── home.js
        ├── 404.js
```

The generated routing configuration is as follows:

```bash
[
 { path: '/user', component: './pages/user.js'},
 { path: '/home', component: './pages/home.js' },
 { path: '*', component: './pages/404.js'}
]
```

All unmatched routes will be matched to `pages/404.[tj]s`.
