Convert to app router

[allenjd3]

This updates the laravel/breeze-next starter to using the new App Router routing syntax. I am not a nextjs expert so it is very possible that I'm missing better ways to do this.

This also bumps the nextjs version to nextjs 14

Benefits to changing- App Router is the "new" way of doing routing in nextjs applications so this modernizes this starter kit.

Technically, the pages style routing is still valid so we could offer both types in separate branches or just convert to the new direction.

[vipertecpro]

Wow is this really happening ?? that's really awsomm. This is the best, thx alot. We do need app router and combo with laravel is the best.
I hope all the other guiz (like tailwind flowbite) can also start building it up.

[taylorotwell]

Seems to work pretty well. A couple of questions:

• The Nunito font doesn't seem to be rendering.
• Can you link me to some docs explaining what the "@" sign does when naming directories, for example in "@Header".

Please mark as ready for review when answered.

[allenjd3]

So here are the docs on the "@" sign- They are called parallel routes and I'm not actually sure if this is the best spot for them. - https://nextjs.org/docs/app/building-your-application/routing/parallel-routes

When I imagine the 'dashboard' route I think of the user doing something like having a structure similar to this where posts would be nested in the dashboard route. Something like /dashboard/posts

dashboard
  @header
    page.js
  page.js
  layout.js
  posts
    layout.js
    page.js 

In this case that @header would apply to all nested routes so it would be impossible to override the "Dashboard" in the posts route. Instead you could do something like this-

dashboard
  (main)
    @header
      page.js
    page.js
    layout.js
  posts
    @header
      page.js
    layout.js
    page.js 

that would allow you to update the header section on each nested route like dashboard/posts in this instance. The other option is to just ditch the parallel routes and colocate a Dashboard component in the dashboard directory similar to the way I added the logo in the auth routes. Which would you prefer? (PS, I'm dropping the layout in the @header and just inlining that code in the @header > page.js regardless since it seems unnecessary now that I'm looking at it again

[taylorotwell]

If I was building an app that had "posts", I'm not sure I would nest it under dashboard. I would imagine having /posts.

[allenjd3]

In that case it might be fine the way it is

[taylorotwell]

@allenjd3 it seems strange to me that @Header would be tied to the dashboard directory though? You would likely want to use that basic header on lots of pages?

[allenjd3]

Yeah what's odd about parallel routes is that they don't support nesting- Here is a discussion that talks about this limitation: vercel/next.js#48927 - In this case it would be nice to have the slot in the layout one level above the dashboard and then ideally you could override it in nested routes. But it currently requires the @header to be in the same directory and it would be inherited by all children. So in the case we were discussing earlier if you had-

(app)
  page.js
  layout.js
  @header
    page.js
  dashboard
    etc...
  posts
    etc...

Then /dashboard and /posts would both have the exact same @header-

Perhaps in this case a wrapping component still makes more sense?
Edit: @header might not be a great name either since it really is just the section that names the page "Dashboard" or "Posts". The navigation area is already one level up in the wrapping layout

[allenjd3]

I went ahead and simplified it by recreating the DashboardLayout component. Feel free to walk that commit back if you want to keep the other way of doing it!

[allenjd3]

Alright I finally figured out how to do the @header the proper way... Sorry for all the back and forth 😅

Looks like you can do this-

(app)
  @header
    dashboard
      page.js
  dashboard
    page.js
    layout.js
  layout.js

where the root route has the reference to the header and the header names routes that are "parallel" to the ones that you create using the normal routing. Makes sense now that I get it.

[aligajani]

@allenjd3 Nice work. There is one thing we need to look into. How to prevent a flash on login page when say someone is visiting it from an authenticated area? Not sure how you would approach this with Next 14 and this Breeze starter kit. Any tips?

[allenjd3]

I put in a possible solution to the flicker- I'm researching how to do this using the new Suspense api. I'll update this if I can figure it out!

[aligajani]

I think middlewares might be one way Ali Gajani Founder at Mr. Geek www.mrgeek.me www.aligajani.com

…

On Sat, Dec 23, 2023 at 3:28 PM James Allen ***@***.***> wrote: I put in a possible solution to the flicker- I'm researching how to do this using the new Suspense api. I'll update this if I can figure it out! — Reply to this email directly, view it on GitHub <#39 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AANGRWXXI6AWP6ZJRKREIG3YK32DHAVCNFSM6AAAAABAP5EWMGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRYGMYTKNZUGY> . You are receiving this because you commented.Message ID: ***@***.***>

[bjaspire]

I got Error: Hydration failed because the initial UI does not match what was rendered on the server. on login page.

[allenjd3]

If you have something like lastpass enabled on the page it will inject divs that don't play well with nextjs in dev mode