Next.js 15 Chore/update (#137)

* removed dummy sitemap and using route sitemap

* removed consoles

* removed swc

* metadata to viewport export

* deri upgrade to latest

* next canary stable

* updated client on about page

actions/postAcions.ts

@@ -48,7 +48,7 @@ export const getArticles = cache(async function (): Promise<ArticlCardType[]> {
 });
 
 export const getArticleBySlug = cache(async function (
-  slug?: string,
+  slug: string,
 ): Promise<ArticleDetailType> {
   const query = `
 *[_type == "article" && slug.current == $slug][0]{

app/(web)/404/page.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function NotFound() {
+  return (
+    <div className="pt-24 page-container">
+      <div>
+        <Image
+          src="/images/puglie-pug.gif"
+          alt="sad pug "
+          className="mb-8  aspect-square rounded-full border border-theme-accent-opaque"
+          width={150}
+          height={150}
+        />
+        <h1 className="text-3xl lg:text-5xl text-theme-primary font-theme font-bold mb-12">
+          😟 Oops! Page Not Found
+        </h1>
+        <p className="text-lg mt-4 mb-4 leading-loose ">
+          Page you’re looking for. It might have been moved, deleted, or never
+          existed.
+          <Link
+            className={` mt-4 max-w-max  flex cursor-pointer items-center hover:text-theme-accent py-3 hover:bg-theme-accent-opaque duration-300  transition-all border  px-4  rounded-full
+          bg-theme-primary bg-opacity-5 border-opacity-5 border-theme-primary  text-theme-accent`}
+            href="/articles"
+          >
+            Articles
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

app/(web)/about/page.tsx

@@ -1,13 +1,10 @@
 export const revalidate = 60;
-import dynamic from "next/dynamic";
-import Image from "next/image";
+
+import ComputerModel from "@/components/common/model/ModelWrapper";
 import Hero from "@/components/pages/hero";
-import { getOpenGraph, getTwitterCard, metaData } from "@/utils/metadata";
+import Image from "next/image";
 import type { Metadata } from "next";
-
-const ComputerModel = dynamic(() => import("@/components/common/model"), {
-  ssr: false,
-});
+import { getOpenGraph, getTwitterCard, metaData } from "@/utils/metadata";
 
 const hero = {
   title: "About",
@@ -17,12 +14,14 @@ const hero = {
 
 export const metadata: Metadata = {
   title: "About | Arkar Myat",
+
   openGraph: getOpenGraph(
     "/images/arkar.png",
     "About | " + metaData.title,
     metaData.description,
     new URL("/about", metaData.url),
   ),
+
   twitter: getTwitterCard(
     "/images/arkar.png",
     "About | " + metaData.title,

app/(web)/articles/[slug]/page.tsx

@@ -12,12 +12,12 @@ import {
   getArticleSEOContentBySlug,
 } from "@/actions/postAcions";
 import { getOpenGraph, getTwitterCard, metaData } from "@/utils/metadata";
+import { redirect } from "next/navigation";
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string };
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>;
 }) {
+  const params = await props.params;
   const data: ArticleDetailType = await getArticleSEOContentBySlug(params.slug);
   return {
     title: data?.title,
@@ -36,8 +36,11 @@ export async function generateMetadata({
 
 async function ArticleDetailPage(props: DetailPageParamTypes) {
   const { params } = props;
-  const data = await getArticleBySlug(params?.slug);
-  if (data === null) return <></>;
+  const { slug } = await params;
+  const data = await getArticleBySlug(slug);
+  if (data === null) {
+    return redirect("/404");
+  }
   return (
     <div className="page-container md:gap-4 lg:gap-12">
       <div className="flex shrink page-left flex-col gap-4">

app/(web)/articles/page.tsx

@@ -9,23 +9,27 @@ import { getOpenGraph, getTwitterCard, metaData } from "@/utils/metadata";
 
 export const metadata: Metadata = {
   title: "Articles | Arkar",
+
   openGraph: getOpenGraph(
     "/images/articles.png",
     "Articles | " + metaData.title,
     metaData.description,
     new URL("/articles", metaData.url),
   ),
+
   twitter: getTwitterCard(
     "/images/articles.png",
     "Articles | " + metaData.title,
     metaData.description,
   ),
 };
 
-export default async function ArticlePage(props: {
-  searchParams?: { category: string | undefined };
+export default async function ArticlePage({
+  searchParams,
+}: {
+  searchParams?: Promise<{ category: string | undefined }>;
 }) {
-  const { searchParams } = props;
+  const param = await searchParams;
   const categories = await getCategories();
   return (
     <div className="page-container gap-4 md:gap-12">
@@ -34,7 +38,7 @@ export default async function ArticlePage(props: {
         <div className="block md:hidden row-start-1 lg:col-start-2">
           <Categories categories={categories} />
         </div>
-        <ArticleTimeLine current={searchParams?.category} />
+        <ArticleTimeLine current={param?.category} />
       </div>
       <div className="page-right hidden md:block row-start-1 lg:col-start-2">
         <Categories categories={categories} />

app/(web)/layout.tsx

@@ -1,6 +1,5 @@
 import "@styles/globals.css";
 import "dracula-prism/dist/css/dracula-prism.min.css";
-import "katex/dist/katex.min.css";
 import GradientMesh from "@/components/common/gradient-mesh";
 import Header from "@/components/common/header";
 import NavAside from "@/components/common/nav-aside";
@@ -13,26 +12,32 @@ import { CSPostHogProvider } from "@/components/providers/PostHogProvider";
 
 export const metadata: Metadata = {
   metadataBase: new URL(process.env.NEXT_PUBLIC_DOMAIN || ""),
+
   title: {
     default: metaData.title,
     template: "%s",
   },
+
   description: metaData.description,
   generator: "Next.js",
   applicationName: metaData.siteName,
   referrer: "origin-when-cross-origin",
   keywords: metaData.keywords,
+
   authors: [
     { name: metaData.title, url: metaData.url },
     { name: "Arkar Myat", url: "https://arkar.space" },
   ],
+
   creator: metaData.title,
   publisher: metaData.title,
+
   formatDetection: {
     email: false,
     address: false,
     telephone: false,
   },
+
   robots: {
     index: true,
     follow: true,
@@ -46,12 +51,14 @@ export const metadata: Metadata = {
       "max-snippet": -1,
     },
   },
+
   openGraph: getOpenGraph(
     "/images/arkar.png",
     metaData.title,
     metaData.description,
     metaData.url,
   ),
+
   twitter: getTwitterCard(
     "/images/arkar.png",
     metaData.title,

app/(web)/newsletter/sorry-to-see-you-go/[email]/page.tsx

@@ -1,15 +1,19 @@
 "use client";
 import Image from "next/image";
 import Link from "next/link";
-import React, { useState } from "react";
+import React, { useState, use } from "react";
 import { unsubscribe } from "@/actions/newsLetterActions";
 import { useTransition } from "react";
 
-export default function ByeBye({ params }: any) {
+export default function ByeBye({
+  params,
+}: {
+  params: Promise<{ email: string }>;
+}) {
+  const p = use(params);
   const [message, setMessage] = useState("Unsubscribe");
-  const { email } = params;
   let [isPending, startTransition] = useTransition();
-  let mail = decodeURIComponent(email);
+  let mail = decodeURIComponent(p.email);
   return (
     <div className="pt-24 page-container">
       <div>

app/(web)/not-found.tsx

@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  );
+}

app/(web)/projects/[slug]/page.tsx

@@ -1,11 +1,13 @@
 export const revalidate = 60;
+
 import Hero from "@/components/pages/article/hero";
-import client from "@/utils/client";
-import type { Project } from "@/types/page/testimonials";
 import PortableBody from "@/components/common/portable";
 import TableOfContents from "@/components/common/toc";
+import client from "@/utils/client";
 import type { DetailPageParamTypes } from "@/types";
+import type { Project } from "@/types/page/testimonials";
 import { getOpenGraph, getTwitterCard, metaData } from "@/utils/metadata";
+import { redirect } from "next/navigation";
 
 const query = `
 *[_type == "project" && slug.current == $slug][0]{
@@ -16,11 +18,10 @@ const query = `
   'mainImage':mainImage.asset->{url}.url,
   body,
 }`;
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string };
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>;
 }) {
+  const params = await props.params;
   const seoQuery = `
 *[_type == "project" && slug.current == $slug][0]{
   title,
@@ -48,10 +49,13 @@ export async function generateMetadata({
 }
 async function ProjectDetailPage(props: DetailPageParamTypes) {
   const { params } = props;
+  const { slug } = await params;
   const data: Project = await client.fetch(query, {
-    slug: params?.slug,
+    slug: slug,
   });
-  if (data === null) return <div>404</div>;
+  if (data === null) {
+    return redirect("/404");
+  }
   return (
     <div className="page-container md:gap-4 lg:gap-12">
       <div className="flex shrink page-left flex-col gap-4">

app/(web)/snippets/[slug]/page.tsx

@@ -1,10 +1,12 @@
 export const revalidate = 60;
+
 import Hero from "@/components/pages/article/hero";
 import client from "@/utils/client";
 import type { DetailPageParamTypes } from "@/types";
 import type { SnippetDetailType } from "@/types/articles";
 import { getOpenGraph, getTwitterCard, metaData } from "@/utils/metadata";
 import CodeBlock from "@/components/pages/snippets/codeblock";
+import { redirect } from "next/navigation";
 
 const query = `
 *[_type == "snippet" && slug.current == $slug][0]{
@@ -18,11 +20,10 @@ const query = `
 }
   `;
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string };
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>;
 }) {
+  const params = await props.params;
   const seoQuery = `
   *[_type == "snippet" && slug.current == $slug][0]{
     title,
@@ -44,18 +45,21 @@ export async function generateMetadata({
       data.title,
       data.description,
       new URL(`/snippets/${data?.slug}`, metaData?.url),
-      'article'
+      "article",
     ),
     twitter: getTwitterCard(data?.mainImage, data.title, data.description),
   };
 }
 
 async function SnippetDetailPage(props: DetailPageParamTypes) {
   const { params } = props;
+  const { slug } = await params;
   const data: SnippetDetailType = await client.fetch(query, {
-    slug: params?.slug,
+    slug,
   });
-  if (data === null) return <></>;
+  if (data === null) {
+    return redirect("/404");
+  }
   return (
     <div className="page-container md:gap-4 lg:gap-12">
       <div className="flex shrink page-left flex-col gap-4">

app/(web)/snippets/page.tsx

@@ -15,18 +15,20 @@ const hero = {
 
 export const metadata: Metadata = {
   title: "Snippets | Arkar Myat",
+
   openGraph: getOpenGraph(
     "/images/snippets.png",
     "Snippets | " + metaData.title,
     metaData.description,
     new URL("/snippets", metaData.url),
     "article",
   ),
+
   twitter: getTwitterCard(
     "/images/snippets.png",
     "Snippets | " + metaData.title,
     metaData.description,
-  ),
+  )
 };
 
 async function ArticlePage() {

app/(web)/videos/page.tsx

@@ -11,17 +11,19 @@ const hero = {
 
 export const metadata: Metadata = {
   title: "Videos | Arkar",
+
   openGraph: getOpenGraph(
     "/images/videos.png",
     "Videos | " + metaData.title,
     metaData.description,
     new URL("/videos", metaData.url),
   ),
+
   twitter: getTwitterCard(
     "/images/videos.png",
     "Videos | " + metaData.title,
     metaData.description,
-  ),
+  )
 };
 
 function VideoPage() {