Hi @true kestrel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#page transitions in nextjs with framer motion
slate fjordBOT
Based on the information provided in the extracts, it seems that there are some issues with using Framer Motion for page transitions in Next.js, particularly when using the App Router. This is discussed in the open Github issue NEXT-1151 (https://github.com/vercel/next.js/issues/49279).
However, there are some workarounds suggested in the thread. One user suggests using a FrozenRouter context to ensure that the old route doesn't get unmounted on navigation. Here's the example provided:
/// layout.tsx
function FrozenRouter(props: PropsWithChildren<{}>) {
const context = useContext(LayoutRouterContext);
const frozen = useRef(context).current;
return (
<AnimatePresence>
<motion.div
key={pathname}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.4, type: 'tween' }}
>
<FrozenRouter>{props.children}</FrozenRouter>
</motion.div>
</AnimatePresence>
);
}
Another user suggests creating an intermediary "Glue" component placed between the layout and any sub-routes to handle the transitions. Here's the example provided:
<...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 these are workarounds and may not be the most optimal solutions. It's also important to note that these solutions are based on the information available in the extracts and may not cover all use cases or scenarios.
For more detailed and specific guidance, you might want to refer to the Next.js and Framer Motion documentation or community forums.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
true kestrel
@slate fjord perhaps the same thing can be achieved via view transitions api?
slate fjordBOT
Let me check the knowledge base for you. One moment! :books:
Based on the information provided in the extracts, there was a discussion about the possibility of using the View Transitions API for page transitions in Next.js. However, it seems that there are no immediate plans to support this API in Next.js.
One of the contributors mentioned that the View Transitions API is mostly for Multi-Page Applications (MPAs), while Next.js is Single-Page Application (SPA) oriented. They suggested that it might take a long time before any framework, including Next.js, starts looking to integrate it.
Another contributor clarified that the View Transitions API is not just for MPAs, but also for SPAs. They linked to the Chrome developer documentation (https://developer.chrome.com/docs/web-platform/view-transitions/#why-do-we-need-this-feature) which states that the feature will be expanded to allow for transitions between full page loads, which is currently impossible.
However, the question of whether Next.js and React can and will support this feature remains open.
In conclusion, while the View Transitions API could potentially be used for page transitions in Next.js, it does not appear to be a viable solution at this time based on the information provided in the extracts.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
true kestrel
using zustand, how do avoid hydration error when using app directory with nextjs and localStorage?
@slate fjord using zustand, how do avoid hydration error when using app directory with nextjs and localStorage?
slate fjordBOT
Let me check the knowledge base for you. One moment! :books:
Based on the information provided in the extracts, there are a few potential solutions to avoid hydration errors when using Zustand with Next.js and localStorage.
One of the issues mentioned in a Github issue (https://github.com/vercel/next.js/issues/58695) is that hydration errors can occur when using new Date() on both the client and server to render the same component. To avoid this, you could consider using a different method to generate dates that is consistent across both the client and server.
Another issue mentioned is that unnecessary rerenders can occur because some of the Zustand selectors return a new object on every render and don't use useShallow() to prevent rerenders if the required values haven't changed. To avoid this, you could consider using useShallow() in your Zustand selectors to prevent unnecessary rerenders.
Finally, it's also mentioned that the example still contains a target of es5 in the tsconfig, which is no longer required. Removing this from your tsconfig could potentially help to avoid hydration errors.
Please note that these are potential solutions based on the information provided in the extracts and may not cover all use cases or scenarios. For more detailed and specific guidance, you might want to refer to the Next.js and Zustand documentation or community forums.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
true kestrel
@slate fjord I have a modal in my nextjs application, and I would like to implement query string based state for it.
Could you show me how I can create a hook for this?
slate fjordBOT
Let me check the knowledge base for you. One moment! :books:
Based on the information provided in the extracts, there isn't a direct example of creating a hook for managing a modal's state based on the query string in a Next.js application. However, I can guide you on how you might approach this based on the available information.
You can use the useRouter hook from Next.js to access the query string parameters. You can then create a custom hook that uses this information to manage the state of your modal. Here's a basic example:
import { useRouter } from 'next/router'
import { useState, useEffect } from 'react'
function useModalWithQuery() {
const router = useRouter()
const [isOpen, setIsOpen] = useState(false)
// Listen for changes in the query string
useEffect(() => {
if (router.query.modal) {
setIsOpen(true)
} else {
setIsOpen(false)
}
}, [router.query])
return isOpen
}
In this example, the modal would open if there's a modal parameter in the query string. You can adjust this to suit your needs.
Please note that this is a basic example and might not cover all use cases or scenarios. For more detailed and specific guidance, you might want to refer to the Next.js documentation or community forums.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
slate fjordBOT
Let me check the knowledge base for you. One moment! :books:
Based on the information provided in the extracts, there's no specific mention of Zero Trust architecture in relation to Next.js applications deployed on Vercel.
Zero Trust is a security concept centered on the belief that organizations should not automatically trust anything inside or outside its perimeters and instead must verify anything and everything trying to connect to its systems before granting access.
While Vercel, the creators and maintainers of Next.js, provide managed infrastructure and a developer experience platform for your Next.js applications, the specifics of implementing a Zero Trust architecture would depend on various factors including your application's specific requirements, the nature of your user base, and the sensitivity of the data your application handles.
For more detailed and specific guidance, you might want to refer to the Next.js, Vercel, and Zero Trust architecture documentation or community forums.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
true kestrel
@slate fjord does cloudflare access zero trust work with a nextjs app deployed on vercel? or only via cloudflare pages
slate fjordBOT
Let me check the knowledge base for you. One moment! :books: