#dynamic routes

1 messages · Page 1 of 1 (latest)

sour moat
#

whats the difference between [slug] and [[...slug]] for page routes in app router

candid sundialBOT
#

Hi @sour moat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Next.js, both [slug] and [[...slug]] are used for dynamic routing, but they serve different purposes.

  1. **slug]: This is a dynamic segment. When you don't know the exact segment names ahead of time and want to create routes from dynamic data, you can use Dynamic Segments. A Dynamic Segment can be created by wrapping a file or folder name in square brackets: [segmentName]. For example, [id] or [slug]. Dynamic Segments are passed as the params prop to various functions. For example, a blog could include the following route app/blog/[slug]/page.js where [slug] is the Dynamic Segment for blog posts. The route app/blog/[slug]/page.js will match /blog/a, /blog/b, /blog/c and so on. The params for these routes will be { slug: 'a' }, { slug: 'b' }, { slug: 'c' } respectively. [source** (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes)

  2. **[...slug]]: This is an optional catch-all segment. Catch-all Segments can be made optional by including the parameter in double square brackets: [[...segmentName]]. For example, app/shop/[[...slug]]/page.js will also match /shop, in addition to /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts. The difference between catch-all and optional catch-all segments is that with optional, the route without the parameter is also matched (/shop in the example above). The params for these routes will be {}, { slug: ['a'] }, { slug: ['a', 'b'] }, { slug: ['a', 'b', 'c'] } respectively. [source** (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes)

#

So, the main difference is that [slug] matches exactly one path segment, while [[...slug]] can match any number of path segments, including none.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

sour moat
#

@candid sundial does that actual word between the b rackets matter for the slug? [segmentName]

candid sundialBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, the word between the brackets does matter. It is used as the key in the params object that you can access in your page.

For example, if you have a file named pages/post/[slug].js, you can access the dynamic part of the URL via router.query.slug in your page. If you named the file pages/post/[id].js instead, you would access it via router.query.id.

Here's an example:

import { useRouter } from 'next/router'
 
export default function Page() {
 const router = useRouter()
 return <p>Post: {router.query.slug}</p> // Use the word you put in the brackets here
}

In this code, router.query.slug will contain the dynamic part of the URL. If you named your file pages/post/**id].js, you would need to use router.query.id instead. [source** (https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@sour moat kapa.ai is still learning and improving, please let us know how it did by reacting below

sour moat
#

@candid sundial is navigating to /[slug]/page.tsx and /[segmentName]/page.tsx is accessible by the same url route? what woul be the url?

candid sundialBOT
#

Let me check the knowledge base for you. One moment! :books:

#

No, navigating to /[slug]/page.tsx and /[segmentName]/page.tsx would not be accessible by the same URL route. The word you use in the brackets (like slug or segmentName) forms part of the key in the params object, and it also forms part of the file path in your project.

For example, if you have a file named pages/post/[slug].js, you could access it via a URL like <http://localhost:3000/post/my-post.> In this case, my-post is the dynamic part of the URL, and you can access it in your page via router.query.slug.

If you had a file named pages/post/[segmentName].js instead, you would still access it via a URL like <http://localhost:3000/post/my-post.> However, in your page, you would access the dynamic part of the URL via router.query.segmentName.

So, the URL structure remains the same, but the way you access the dynamic part of the URL in your page depends on the word you use in the brackets. source (https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@sour moat kapa.ai is still learning and improving, please let us know how it did by reacting below

sour moat
#

@candid sundial error

Failed to compile
./src/app/layout.tsx
Error:
× The "use server" directive must be at the top of the file.
╭─[/Users/chrisren/Development/nextjs-link-issue-reproduction/src/app/layout.tsx:1:1]
1 │ 'use server'
· ────────────
2 │
3 │ import type { Metadata } from 'next'
4 │ import { Inter } from 'next/font/google'
╰────
This error occurred during the build process and can only be dismissed by fixing the error.

'use server'

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import Link from 'next/link'
import styles from './page.module.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<div className={styles.grid}>
<Link
href="/link-1"
className={styles.card}
>
<h2>
Link 1 <span>-></span>
</h2>
<p>Click to go to /link-1</p>
</Link>

    <Link
      href="/link-2"
      className={styles.card}
    >
      <h2>
        Link 2 <span>-&gt;</span>
      </h2>
      <p>Click to go to /link-2</p>
    </Link>

    <Link
      href="/link-3"
      className={styles.card}
    >
      <h2>
        Link 3 <span>-&gt;</span>
      </h2>
      <p>Click to go to /link-3</p>
    </Link>

    <Link
      href="/"
      className={styles.card}
    >
      <h2>
        Home <span>-&gt;</span>
      </h2>
      <p>
        Click to go to /
      </p>
    </Link>
  </div>
  <div>
    {children}
  </div>
    </body>
</html>

)
}

candid sundialBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The error message you're seeing is due to the 'use server' directive being at the top of a file that is not a server action. The 'use server' directive is used to mark a file or function as a server action in Next.js. However, it should only be used in files that export server actions, not in files that define React components.

In your case, the file layout.tsx is a React component file, not a server action file. Therefore, you should remove the 'use server' directive from the top of this file.

Here's how your corrected layout.tsx file should look:

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import Link from 'next/link'
import styles from './page.module.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
      <div className={styles.grid}>
        <Link
          href="/link-1"
          className={styles.card}
        >
          <h2>
            Link 1 <span>-&gt;</span>
          </h2>
          <p>Click to go to /link-1</p>
        </Link>

        <Link
          href="/link-2"
          className={styles.card}
        >
          <h2>
            Link 2 <span>-&gt;</span>
          </h2>
          <p>Click to go to /link-2</p>
        </Link>

        <Link
          href="/link-3"
          className={styles.card}
        >
          <h2>
            Link 3 <span>-&gt;</span>
          </h2>
          <p>Click to go to /link-3</p>
        </Link>
#

<Link
href="/"
className={styles.card}
>
<h2>
Home <span>-></span>
</h2>
<p>
Click to go to /
</p>
</Link>
</div>
<div>
{children}
</div>
</body>
</html>
)
}


For more information on how to use the `'use server'` directive correctly, you can refer to the **Next.js documentation on Server Actions** (<https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions>).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
#

@sour moat kapa.ai is still learning and improving, please let us know how it did by reacting below

sour moat
#

@candid sundial how come this doesnt complain

'use server'

import '#/styles/globals.css';

import { getCategories } from '#/app/api/categories/getCategories';
import { ClickCounter } from '#/ui/click-counter';
import { TabGroup } from '#/ui/tab-group';
import React from 'react';

export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const categories = await getCategories();
return (
<html lang="en" className="[color-scheme:dark]">
<body className="bg-gray-1100 overflow-y-scroll bg-[url('/grid.svg')] pb-36">
<div className="lg:pl-72">
<div className="mx-auto max-w-4xl space-y-8 px-2 pt-20 lg:px-8 lg:py-8">
<div className="flex justify-between">
<TabGroup
path=""
items={[
{
text: 'Home',
slug: '/',
},
...categories.map((x) => ({
text: x.name,
slug: x.slug,
})),
]}
/>
<div className="self-start">
<ClickCounter />
</div>
</div>
<div className="space-y-9">
<div>{children}</div>
</div>
</div>
</div>
</body>
</html>
);
}

but that does

candid sundialBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The difference between the two examples you provided is that the first one is using server-side data fetching within the component, which is allowed in Next.js when you use the 'use server' directive.

In the first example, you're using getCategories function to fetch data from the server and then using that data to render your component. This is a valid use case for the 'use server' directive, as you're performing server-side operations within your component.

'use server'

import '#/styles/globals.css';

import { getCategories } from '#/app/api/categories/getCategories';
import { ClickCounter } from '#/ui/click-counter';
import { TabGroup } from '#/ui/tab-group';
import React from 'react';


export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const categories = await getCategories();
  // rest of the code
}

In the second example, you're not performing any server-side operations within your component, so the 'use server' directive is not needed and will cause an error.

The 'use server' directive should only be used when you're performing server-side operations within your component, such as fetching data from an API. If you're not doing any server-side operations, you should not use the 'use server' directive.

For more information on how to use the 'use server' directive correctly, you can refer to the Next.js documentation on Server Actions (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@sour moat kapa.ai is still learning and improving, please let us know how it did by reacting below

sour moat
#

@candid sundial how would I have '/link-1' href correctly route to the page under src/app/[categorySlug]/page.tsx?

candid sundialBOT
#

Let me check the knowledge base for you. One moment! :books: