apparent-cyan

Nextjs app directory style routing

I was wondering if it is possible for to configure the vite plugin such that the folder structure is somewhat like nextjs app folder 1. Be able to group routes for layout 2. Only files say layout.tsx and index.tsx considered for routing

4 Replies

conscious-sapphire•2y ago

Regarding 2. Short answer: no Possible solution: You could omit files, but setting an ignore prefix like:

index.tsx
-ingoreThisFile.tsx
-ignoreThisFolder/header.tsx

index.tsx
-ingoreThisFile.tsx
-ignoreThisFolder/header.tsx

Long answer: The purpose for Tanstack Router's file-based approach (with the cli or vite-plugin) is more for easily generating the route-tree, than it is for adhering to strict routing guidelines. It parses the tree into a model off of which the routeTree.gen.ts is generated. It's how its able to offer the mix of flat and nested file-based routing approaches in a single project, since it is unopinionated in how you actually structure the project. Plus, there are quite of few people who aren't too pleased with Next's approach of having multiple files named page.tsx and having them open in your IDE. As such they'd much rather have posts/$postId.edit.tsx instead of posts/[postId]/edit/page.tsx. @mmrath Regarding 1. Yes, the router does support both _layout routes and nested routes, and its purely matter of choosing what suits your needs. nested = if need logic/components to wrap child routes by a high path, ie: /posts/something _layout -> if you need logic/components to wrap child routes, BUT MUST NOT be visible in the URL Let me know if you need more clarity on this.

exotic-emerald•2y ago

@Sean Cassiere thanks for the great answer. Is there a way to declare a route inside of a directory? In other words I want my route and sub-routes all in one directory. For example: I want my /blog route to live in routes/blog/blog.tsx instead of routes/blog.tsx I see that I can name my file route.tsx inside of the folder instead of blog.tsx. But specifically I would like a differentiator to avoid endless route.tsx files

conscious-sapphire•2y ago

For the blog route, you have the following options:

src/routes/blog.tsx

src/routes/blog/index.tsx

src/routes/blog/route.tsx

src/routes/blog.tsx

src/routes/blog/index.tsx

src/routes/blog/route.tsx

/src/routes/blog/blog.tsx wouldn't work since this would generate the URL as http://localhost:3000/blog/blog You could use a layout route to put it into a separate folder that is transparent to the URL.

src/routes
  _blog-layout/blog.tsx
  _blog-layout.tsx
  index.tsx

src/routes
  _blog-layout/blog.tsx
  _blog-layout.tsx
  index.tsx

Just remember that this isn't the official use-case for Layout routes, and this workaround would only to meet your DX requirements. Like the Next App router and Pages router, the Tanstack Router CLI is opinionated. Its uses these conventions so it can reliably build the routeTree file correctly.

exotic-emerald•2y ago

Thank you for the detailed response! 🙌🏻

Gaming

Programming

Nextjs app directory style routing

Did you find this page helpful?