pages/#

The identifier for the entry point when the application uses the Pages entry type.

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:

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

The corresponding generated routing configuration is:

[
  { 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?.

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:

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

The corresponding generated routing configuration is:

[
  { 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:

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:

.
└── 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.

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:

└── pages
    ├── a
    │   ├── b
    │   │   └── index.js
    │   ├── _layout.js
    │   └── index.js
    └── index.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:

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

The generated routing configuration is as follows:

[
 { 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.