Add direct references to the nextjs docs sections

v2/community/reusableMD/supported-tech-stacks-frontend.mdx

@@ -1,3 +1,6 @@
+
+import RecipeLink from "/src/components/RecipeLink";
+
 <div style={{
   display: "flex",
   flexDirection: "row",
@@ -14,5 +17,11 @@
 </div>
 
 :::important for mobile apps
-For mobile apps, please see the "Using your own UI" section (see left nav bar)
-:::
+For mobile apps, please see the <RecipeLink link="custom-ui/init/frontend">**Using your own UI**</RecipeLink> section from the left nav bar
+:::
+
+:::important for nextjs 
+For **NextJS** apps, please go to the **Integrations** section from the left nav bar.
+- <RecipeLink link="nextjs/app-directory/about"> App Directory Instructions </RecipeLink>
+- <RecipeLink link="nextjs/about"> Pages Directory Instructions </RecipeLink>
+:::

v2/src/components/RecipeLink.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo } from "react";
+import { useLocation } from "@docusaurus/router";
+
+export default function RecipeLink({
+  link,
+  children,
+}: React.PropsWithChildren<{ link: string }>) {
+  const { pathname } = useLocation();
+
+  const fullLink = useMemo(() => {
+    const [, , recipePath] = pathname.split("/");
+
+    console.log(link);
+
+    console.log(recipePath);
+    return `/docs/${recipePath}/${link}`;
+  }, [pathname, link]);
+
+  return <a href={fullLink}>{children}</a>;
+}