Next13 app directory - Githubissues

tatethurston commented 10 months ago

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:

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 commented 2 months ago

@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 commented 2 months ago

@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 commented 1 month ago

@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 commented 3 weeks ago

@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 commented 2 weeks ago

@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

tatethurston / nextjs-routes

Next13 app directory #170