From 9d58f81047f99ebbe867dad4b49de91e278142ae Mon Sep 17 00:00:00 2001
From: Bogdan Carpusor <bogdan@supertokens.com>
Date: Thu, 5 Sep 2024 22:03:24 +0300
Subject: [PATCH] Add direct references to the nextjs docs sections

---
 .../supported-tech-stacks-frontend.mdx        | 13 ++++++++++--
 v2/src/components/RecipeLink.tsx              | 20 +++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 v2/src/components/RecipeLink.tsx

diff --git a/v2/community/reusableMD/supported-tech-stacks-frontend.mdx b/v2/community/reusableMD/supported-tech-stacks-frontend.mdx
index f24248fb6..5b2044fcb 100644
--- a/v2/community/reusableMD/supported-tech-stacks-frontend.mdx
+++ b/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)
-:::
\ No newline at end of file
+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>
+:::
diff --git a/v2/src/components/RecipeLink.tsx b/v2/src/components/RecipeLink.tsx
new file mode 100644
index 000000000..4ef74c9c8
--- /dev/null
+++ b/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>;
+}