Use Next 14 (#364)

* Use Next 14

* Fix lint, ts error

* Fix ghost axios issue

package.json

@@ -27,7 +27,7 @@
 		"flexsearch": "^0.7.31",
 		"github-slugger": "^2.0.0",
 		"lucide-react": "^0.286.0",
-		"next": "13.5",
+		"next": "^14",
 		"nextjs-toploader": "^1.5.3",
 		"node-html-parser": "^6.1.11",
 		"posthog-js": "^1.96.1",

src/app/Header.tsx

@@ -147,7 +147,7 @@ export function Header() {
 						"xl:static xl:animate-none xl:flex-row xl:justify-between xl:bg-transparent xl:p-0",
 					)}
 				>
-					<ul className="flex flex-col gap-5 xl:flex-row lg:items-center">
+					<ul className="flex flex-col gap-5 lg:items-center xl:flex-row">
 						{links.map((link) => {
 							return (
 								<li
@@ -226,15 +226,15 @@ function DropdownLinks(props: {
 	return (
 		<>
 			{/* desktop */}
-			<div className="hidden xl:flex items-center">
+			<div className="hidden items-center xl:flex">
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
 						<Button
 							variant="ghost"
-							className="inline-flex gap-1 py-0 px-0 font-medium text-f-300 hover:bg-transparent hover:text-f-100 items-center text-sm"
+							className="inline-flex items-center gap-1 p-0 text-sm font-medium text-f-300 hover:bg-transparent hover:text-f-100"
 						>
 							{props.category}
-							<ChevronDownIcon className="text-f-300 opacity-70 size-4" />
+							<ChevronDownIcon className="size-4 text-f-300 opacity-70" />
 						</Button>
 					</DropdownMenuTrigger>
 

src/app/api/og/route.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import { ImageResponse } from "next/server";
+import { ImageResponse } from "next/og";
 import { getBaseUrl } from "../../../lib/getBaseUrl";
 
 export const runtime = "edge";
@@ -22,7 +22,7 @@ export async function GET(request: Request) {
 	const title = searchParams.get("title");
 
 	if (!icon || !title) {
-		return new Response(`Failed to generate the image`, {
+		return new Response("Failed to generate the image", {
 			status: 500,
 		});
 	}