#Page Transition App Directory

1 messages · Page 1 of 1 (latest)

elder charm
#

How can I add transitions when between pages using nextjs 14 with app router. Do not give solutions based on pages router

charred blazeBOT
#

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

#

Based on the information provided in the extracts, it seems there is currently an open issue with using Framer Motion for page transitions with the App Router in Next.js 13.4. This issue is specifically related to performing page transitions as the user navigates from page route to page route in the app router (source (https://github.com/vercel/next.js/issues/49279)).

However, a workaround has been suggested in another open issue. This involves creating an intermediary component, referred to as "Glue", which is placed between the layout and any sub-routes. This "Glue" component can be used to implement exit transition behavior (source (https://github.com/vercel/next.js/issues/49596)).

Here's a simplified example of what the structure might look like:

<...USER.Layout > 
  {/* Some user components  */}
  <OuterLayoutRouter>
    {styles}
    <USER.Glue > {/* <-- Placement of new "Glue" component  */}
      {preservedSegments.map(() => 
        <TemplateContext.Provider key="....">
          <USER.Template>
            <RenderTemplateContextValues>
          </USER.Template >
        </TemplateContext.Provider>
      )}
    </USER.Glue >
  </OuterLayoutRouter>
  {/* More user components  */}
</...USER.Layout >

Please note that this is a workaround and may not work in all cases. It's also important to keep an eye on the open issues for updates or potential fixes in future versions of Next.js.

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

#

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

elder charm
#

@charred blaze can you explain the workaround in more detail?

charred blazeBOT
#

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

#

Sure, I can provide more details based on the information in the extracts.

The workaround involves creating an intermediary component, referred to as "Glue". This component is placed between the layout and any sub-routes. The purpose of this "Glue" component is to manage the transitions between different routes.

Here's a simplified example of what the structure might look like:

<...USER.Layout > 
  {/* Some user components  */}
  <OuterLayoutRouter>
    {styles}
    <USER.Glue > {/* <-- Placement of new "Glue" component  */}
       {preservedSegments.map(() => 
          <TemplateContext.Provider key="....">
            <USER.Template>
              <RenderTemplateContextValues>
            </USER.Template >
          </TemplateContext.Provider>
       )}
    </USER.Glue >
  </OuterLayoutRouter>
  {/* More user components  */}
</...USER.Layout >

In this structure, OuterLayoutRouter is an internal Next.js component that handles loading/unloading of templates. The USER.Glue component is a user-defined component that is placed within the OuterLayoutRouter. This "Glue" component is responsible for managing the transitions between different routes.

The preservedSegments.map() function is used to render each route segment. Each segment is wrapped in a TemplateContext.Provider which provides the necessary context for the route segment. The USER.Template component is a user-defined component that represents the actual content of the route segment.

Please note that this is a workaround and may not work in all cases. It's also important to keep an eye on the open issues for updates or potential fixes in future versions of Next.js (source (https://github.com/vercel/next.js/issues/49596)).

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