init

app/tutorials/[tutorial]/ContentTable.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function ContentTable() {
+	return <div>ContentTable</div>;
+}

app/tutorials/[tutorial]/Sidebar.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Sidebar() {
+	return <div>Sidebar</div>;
+}

app/tutorials/[tutorial]/layout.tsx

@@ -0,0 +1,13 @@
+import ContentTable from "./ContentTable";
+import Sidebar from "./Sidebar";
+import styles from "../../../styles/Tutorial.module.scss";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+	return (
+		<div className={styles.tutorial}>
+			<ContentTable />
+			<div className="tutorialContent">{children}</div>
+			<Sidebar />
+		</div>
+	);
+}

app/tutorials/[tutorial]/page.tsx

@@ -0,0 +1,20 @@
+import { marked } from "marked";
+export default async function Page({
+	params,
+}: {
+	params: { tutorial: string };
+}) {
+	const requestData = await fetch(`http://127.0.0.1:3000/test.json`, {
+		cache: "no-store", //! Just for dev
+		/*next: {   revalidate: 10  }*/
+	});
+	const data = await requestData.json();
+
+	return (
+		<div
+			dangerouslySetInnerHTML={{
+				__html: marked.parse(data.markdown) ?? "",
+			}}
+		></div>
+	);
+}

app/tutorials/layout.tsx

@@ -0,0 +1,3 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+	return <>{children}</>;
+}

app/tutorials/page.tsx

@@ -0,0 +1,9 @@
+export default function Page({
+	params,
+	searchParams,
+}: {
+	params: { slug: string };
+	searchParams?: { [key: string]: string | string[] | undefined };
+}) {
+	return <h1>List all tutorials</h1>;
+}