fix: resolve docs build failures on app router branch

Author: backlineint

turbo.json

@@ -1,6 +1,5 @@
 {
   "$schema": "https://turborepo.org/schema.json",
-  "baseBranch": "origin/main",
   "pipeline": {
     "build": {
       "dependsOn": ["^build"],

www/components/video.tsx

@@ -46,8 +46,8 @@ export function Video({
               <Image
                 src={image}
                 layout="responsive"
-                width="1600px"
-                height="900px"
+                width="1600"
+                height="900"
                 alt="Thumbnail"
               />
             </div>

www/pages/blog/[...slug].tsx

@@ -1,5 +1,6 @@
 import { getMdxNode, getMdxPaths } from "next-mdx/server"
 import { useHydrate } from "next-mdx/client"
+import { MdxRemote } from "next-mdx-remote/types"
 
 import { Blog } from "types"
 import { Layout } from "components/layout"
@@ -11,7 +12,7 @@ export interface BlogsPageProps {
 
 export default function BlogsPage({ blog }: BlogsPageProps) {
   const content = useHydrate(blog, {
-    components: mdxComponents,
+    components: mdxComponents as unknown as MdxRemote.Components,
   })
 
   return (
@@ -42,7 +43,7 @@ export async function getStaticPaths() {
 
 export async function getStaticProps(context) {
   const blog = await getMdxNode("blog", context, {
-    components: mdxComponents,
+    components: mdxComponents as unknown as MdxRemote.Components,
     mdxOptions: {
       remarkPlugins: [
         require("remark-slug"),

www/pages/docs/[[...slug]].tsx

@@ -1,6 +1,7 @@
 import { getMdxNode, getMdxPaths } from "next-mdx/server"
 import { useHydrate } from "next-mdx/client"
 import { getTableOfContents, TableOfContents } from "next-mdx-toc"
+import { MdxRemote } from "next-mdx-remote/types"
 
 import { Doc } from "types"
 import { docsConfig } from "config/docs"
@@ -17,7 +18,7 @@ export interface DocsPageProps {
 
 export default function DocsPage({ doc, toc }: DocsPageProps) {
   const content = useHydrate(doc, {
-    components: mdxComponents,
+    components: mdxComponents as unknown as MdxRemote.Components,
   })
 
   return (
@@ -65,7 +66,7 @@ export async function getStaticPaths() {
 
 export async function getStaticProps(context) {
   const doc = await getMdxNode("doc", context, {
-    components: mdxComponents,
+    components: mdxComponents as unknown as MdxRemote.Components,
     mdxOptions: {
       remarkPlugins: [
         require("remark-slug"),

www/pages/guides/[...slug].tsx

@@ -1,6 +1,7 @@
 import { getMdxNode, getMdxPaths } from "next-mdx/server"
 import { useHydrate } from "next-mdx/client"
 import { getTableOfContents, TableOfContents } from "next-mdx-toc"
+import { MdxRemote } from "next-mdx-remote/types"
 
 import { Guide } from "types"
 import { guidesConfig } from "config/guides"
@@ -17,7 +18,7 @@ export interface GuidesPageProps {
 
 export default function GuidesPage({ guide, toc }: GuidesPageProps) {
   const content = useHydrate(guide, {
-    components: mdxComponents,
+    components: mdxComponents as unknown as MdxRemote.Components,
   })
 
   return (
@@ -68,7 +69,7 @@ export async function getStaticPaths() {
 
 export async function getStaticProps(context) {
   const guide = await getMdxNode("guide", context, {
-    components: mdxComponents,
+    components: mdxComponents as unknown as MdxRemote.Components,
     mdxOptions: {
       remarkPlugins: [
         require("remark-slug"),

www/pages/index.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import { GetStaticPropsResult } from "next"
 import { getAllMdxNodes } from "next-mdx"
 import Link from "next/link"
+import { MdxRemote } from "next-mdx-remote/types"
 
 import { site } from "config/site"
 import { Feature } from "types"
@@ -16,7 +17,7 @@ interface FeatureCodeProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export function FeatureCode({ feature, ...props }: FeatureCodeProps) {
   const content = useHydrate(feature, {
-    components: mdxComponents,
+    components: mdxComponents as unknown as MdxRemote.Components,
   })
 
   return <div {...props}>{content}</div>

www/pages/learn/[...slug].tsx

@@ -3,6 +3,7 @@ import { getMdxNode, getMdxPaths, getAllMdxNodes } from "next-mdx/server"
 import { useHydrate } from "next-mdx/client"
 import classNames from "classnames"
 import { getTableOfContents, TableOfContents } from "next-mdx-toc"
+import { MdxRemote } from "next-mdx-remote/types"
 
 import { Tutorial } from "types"
 import { tutorialsConfig } from "config/tutorials"
@@ -31,7 +32,7 @@ export default function TutorialPage({
   toc,
 }: TutorialPageProps) {
   const content = useHydrate(tutorial, {
-    components: mdxComponents,
+    components: mdxComponents as unknown as MdxRemote.Components,
   })
 
   const links = group.items.map((tutorial) => ({
@@ -141,7 +142,7 @@ export async function getStaticPaths() {
 
 export async function getStaticProps(context) {
   const tutorial = await getMdxNode("tutorial", context, {
-    components: mdxComponents,
+    components: mdxComponents as unknown as MdxRemote.Components,
     mdxOptions: {
       remarkPlugins: [
         require("remark-slug"),