Next.js Routing System

Routing

First, let’s take a look at the Next.js routing system.

In the app router of next.js, we could create folders under the app directory, and create page.tsx in these folders. For example:

• src
  • app
    • documents
      • page.tsx

const DocumentsPage = () => {
  return ( 
    <div>
      Documents Page
    </div>
   );
}
 
export default DocumentsPage;

Then we can visit this page on http://localhost:3000/documents  and we’ll get

Documents Page

on the page.

Now let create another page under the documents folder:

• src
  • app
    • documents
      • 123
        • page.tsx

const DocumentIdPage = () => {
  return ( 
    <div>Document ID Page</div>
   );
}
 
export default DocumentIdPage;

Then we can visit this page on http://localhost:3000/documents/123  and we’ll get

Document ID Page

on the page.

It can be seen that the name of the folder we created will be parsed as a routing address by Next.js, and the page.tsx under the folder will be parsed as the content of the page corresponding to the routing address.

But what if we have a lot of documents with many different document ids? It is impossible to create folders and pages for every document! Don’t worry, Next.js’s dynamic routing system enables us to create countless routing pages with dynamic parameters.

Dynamic Routing

Let’s create a folder named [documentId] under documents directory, and write its page.tsx like this:

• src
  • app
    • documents
      • [documentId]
        • page.tsx

interface DocumentIdPageProps {
  params: Promise<{ documentId: string }>;
}
 
const DocumentIdPage = async ({ params }: DocumentIdPageProps) => {
  const { documentId } = await params;
  return ( 
    <div>Document ID: { documentId }</div>
   );
}
 
export default DocumentIdPage;

Now try to visit http://localhost:3000/documents/456  (you can change the 456 to any other characters you like), and you’ll get:

Document ID: 456

on the browser.