Next13 app directory

[tatethurston]

This issue is to house all discussion of Next13's app directory. To date, there have been a number of issues inquiring about the app directory:

• needs update for next 13 #169
• Library not working with the NextJS 13 app folder #167
• Is there a setting when using Next.js 13? #158
• Nextjs@13 not supported dynamic href in the /app directory #142
• Incorrect Typing of Props for Link in next 13 #99

nextjs-routes only supports the pages directory today. Next.js 13.2 includes statically typed links for the app directory: https://nextjs.org/blog/next-13-2#statically-typed-links.

If you find deficiencies with Next.js' approach and have ideas for a better experience, let me know and I’m happy to consider adding support. Until I hear from folks, I'm operating under the impression that Next 13's statically typed links meet everyone's needs.

[Kovbo]

@tatethurston Thank you for adding support for the app router. How to use it with the app router? Dynamic href in this format is not supported now:

  href={{
    pathname: "/foos/[foo]",
    query: { foo: "bar" },
  }}

I've been trying to use Next.js' types, but run into a limitation with dynamic routes.
Having some dynamic routes (/foos/[foo]/bar and /foos/[foo]/baz) we built a component that should accept only the last part of the dynamic routes pattern (bar or baz) and construct the full route itself.

Your package provides a convenient DynamicRoute interface that makes it possible to create a derivative type that can extract bar and baz:

type ExtractFooRoutes<T> = T extends DynamicRoute<`/foos/[foo]${infer Rest}`, infer Params>
  ? { path: Rest; query: Omit<Params, "foo"> & Record<string, string | undefined> }
  : never;

export type FoosRoute = ExtractSlugRoutes<Route>;

It looks like it is not possible to do the same with Next.js' types. The route they provide import { type Route } from "next"; gives access to static routes only.

[tatethurston]

@Kovbo nextjs-routes doesn’t directly support the app router because of the nextjs change to only accept strings for the href. You may be able to use route for your use case https://github.com/tatethurston/nextjs-routes?tab=readme-ov-file#what-if-i-need-a-runtime

[caioaao]

@Kovbo nextjs-routes doesn’t directly support the app router because of the nextjs change to only accept strings for the href. You may be able to use route for your use case https://github.com/tatethurston/nextjs-routes?tab=readme-ov-file#what-if-i-need-a-runtime

Apparently it's not possible now with nextjs14 as it throws a runtime error saying:

Error: Dynamic href `bla` found in <Link> while using the `/app` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href

I think the short-term solution would be giving a escape-hatch config for allowing strings in Link href prop. An idea would be to use template literal types in the future for not allowing just any strings, but idk how that'd play out with the route fn as it spits strings.

[tatethurston]

@Kovbo nextjs-routes doesn’t directly support the app router because of the nextjs change to only accept strings for the href. You may be able to use route for your use case https://github.com/tatethurston/nextjs-routes?tab=readme-ov-file#what-if-i-need-a-runtime

Apparently it's not possible now with nextjs14 as it throws a runtime error saying:

Error: Dynamic href `bla` found in <Link> while using the `/app` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href

I think the short-term solution would be giving a escape-hatch config for allowing strings in Link href prop. An idea would be to use template literal types in the future for not allowing just any strings, but idk how that'd play out with the route fn as it spits strings.

The route function from https://github.com/tatethurston/nextjs-routes?tab=readme-ov-file#what-if-i-need-a-runtime returns a string.

[caioaao]

@Kovbo nextjs-routes doesn’t directly support the app router because of the nextjs change to only accept strings for the href. You may be able to use route for your use case https://github.com/tatethurston/nextjs-routes?tab=readme-ov-file#what-if-i-need-a-runtime

Apparently it's not possible now with nextjs14 as it throws a runtime error saying:

Error: Dynamic href `bla` found in <Link> while using the `/app` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href

I think the short-term solution would be giving a escape-hatch config for allowing strings in Link href prop. An idea would be to use template literal types in the future for not allowing just any strings, but idk how that'd play out with the route fn as it spits strings.

The route function from https://github.com/tatethurston/nextjs-routes?tab=readme-ov-file#what-if-i-need-a-runtime returns a string.

but the project overrides next's route type and doesn't allow us to pass a string to the component, so we can't use the route function directly so we have to call route(...) as unknown as Route for it to work