ci(code-check.yml): use npm script for TypeScript check for consistency

docs(next-env.d.ts): update TypeScript documentation URL
feat(next.config.js): set output to "standalone" for optimized Next.js build
refactor(package.json): update dependencies and add ts:check script
refactor(*.tsx): use type-only imports for ReactElement to improve build performance
perf: bump various package versions for performance and feature improvements

refactor: use 'type' import for React types to clarify imports are only types

refactor(components): use type-only imports for React types to improve build performance

feat(code.tsx): make copyToClipboard an async function to handle clipboard operations properly

style(code.tsx): use void operator for onClick to explicitly ignore any returned value

refactor(components): use 'type' import for React types for consistency and clarity

refactor: use 'import type' for importing types to clarify imports and potentially improve build times

.github/workflows/code-check.yml

@@ -27,4 +27,4 @@ jobs:
       - name: Install dependencies
         run: npm install
       - name: Run typecheck
-        run: npx tsc --noEmit
+        run: npm run ts:check

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.js

@@ -1,8 +1,6 @@
 /** @type {import("next").NextConfig} */
 const nextConfig = {
-  experimental: {
-    appDir: true
-  },
+  output: "standalone",
 
   async redirects() {
     return [

package.json

@@ -6,39 +6,40 @@
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
+    "ts:check": "tsc --noEmit",
     "test:e2e": "playwright test",
     "test:unit": "vitest --ui"
   },
   "dependencies": {
     "@radix-ui/react-hover-card": "^1.0.5",
-    "@tanstack/react-query": "^4.28.0",
-    "clsx": "^1.2.1",
-    "next": "13.2.4",
+    "@tanstack/react-query": "^5.59.13",
+    "clsx": "^2.1.1",
+    "next": "14.2.15",
     "prismjs": "^1.29.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-icons": "^4.8.0",
-    "sharp": "^0.32.0",
-    "sonner": "^0.3.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-icons": "^5.3.0",
+    "sharp": "^0.33.5",
+    "sonner": "^1.5.0",
     "zustand": "^4.3.7"
   },
   "devDependencies": {
-    "@bluzzi/eslint-config": "^0.8.8",
+    "@bluzzi/eslint-config": "^1.2.1",
     "@playwright/test": "^1.32.2",
-    "@types/node": "18.15.11",
+    "@types/node": "22.7.5",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "18.0.33",
-    "@types/react-dom": "18.0.11",
-    "@vitest/ui": "^0.29.8",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
+    "@vitest/ui": "^2.1.2",
     "autoprefixer": "^10.4.14",
     "dotenv": "^16.0.3",
     "eslint": "8.37.0",
-    "eslint-config-next": "13.2.4",
-    "jsdom": "^21.1.1",
+    "eslint-config-next": "14.2.15",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.3.1",
-    "typescript": "5.0.3",
-    "vitest": "^0.29.8"
+    "typescript": "5.6.3",
+    "vitest": "^2.1.2"
   },
   "eslintConfig": {
     "extends": [

src/app/about.section.tsx

@@ -1,7 +1,7 @@
 import { Promote } from "#/lib/components/molecules/promote";
 import { Text } from "#/lib/components/atoms/text";
 import { promotes } from "#/lib/configs/promote";
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 
 export function AboutSection(): ReactElement {
   return (

src/app/documentation/page.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import { Text } from "#/lib/components/atoms/text";
 import Link from "next/link";
 

src/app/footer.section.tsx

@@ -1,5 +1,5 @@
 import { Text } from "#/lib/components/atoms/text";
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import { BsDiscord, BsGithub } from "react-icons/bs";
 import { goscord } from "#/lib/configs/goscord";
 import { clsx } from "clsx";

src/app/header.section.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import { Text } from "#/lib/components/atoms/text";
 import { GoGetButton } from "#/lib/components/molecules/go-get-button";
 import Image from "next/image";

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import "#/lib/styles/reset.css";
 import "#/lib/styles/tailwind.css";
 import { Navbar } from "#/lib/components/layouts/navbar";
-import { PropsWithChildren, ReactElement } from "react";
+import type { PropsWithChildren, ReactElement } from "react";
 import { Provider } from "./provider";
 import { metadata } from "#/lib/configs/metadata";
 import { inter, robotoMono } from "#/lib/configs/font";

src/app/page.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import { HeaderSection } from "./header.section";
 import { AboutSection } from "./about.section";
 import { SetupSection } from "./setup.section";
@@ -15,8 +15,6 @@ export default function Home(): ReactElement {
 
       <SetupSection />
 
-      {/* TODO: https://github.com/vercel/next.js/issues/42292 */}
-      {/* @ts-expect-error Server Component */}
       <StatisticSection />
 
       <TeamSection />

src/app/provider.tsx

@@ -2,7 +2,7 @@
 
 import { Notification } from "#/lib/components/molecules/notification";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { PropsWithChildren, ReactElement } from "react";
+import type { PropsWithChildren, ReactElement } from "react";
 
 const queryClient = new QueryClient();
 

src/app/setup.section.tsx

@@ -3,7 +3,7 @@ import { Code } from "#/lib/components/atoms/code";
 import { Text } from "#/lib/components/atoms/text";
 import { GoGetButton } from "#/lib/components/molecules/go-get-button";
 import { codeExample } from "#/lib/configs/code-example";
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import { BsDiscord } from "react-icons/bs";
 import { FiBook } from "react-icons/fi";
 

src/app/team.section.tsx

@@ -1,6 +1,6 @@
 import { TeamCard } from "#/lib/components/molecules/team-card";
 import { teamMembers } from "#/lib/configs/team";
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 
 export function TeamSection(): ReactElement {
   return (

src/lib/components/atoms/button/button.tsx

@@ -1,5 +1,5 @@
-import { ReactElement } from "react";
-import { ButtonProps } from "./button.type";
+import type { ReactElement } from "react";
+import type { ButtonProps } from "./button.type";
 import { clsx } from "clsx";
 
 export function Button({ size = "base", icon, fullWidth = false, className, children, ...props }: ButtonProps): ReactElement {

src/lib/components/atoms/button/button.type.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from "react";
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from "react";
 
 export type ButtonSize = "small" | "base" | "large";
 

src/lib/components/atoms/button/link-button.tsx

@@ -1,5 +1,5 @@
-import { ReactElement } from "react";
-import { LinkButtonProps } from "./button.type";
+import type { ReactElement } from "react";
+import type { LinkButtonProps } from "./button.type";
 import { clsx } from "clsx";
 import Link from "next/link";
 

src/lib/components/atoms/code/code.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { ReactElement, useEffect } from "react";
-import { CodeProps } from "./code.type";
+import type { ReactElement } from "react";
+import { useEffect } from "react";
+import type { CodeProps } from "./code.type";
 import { FiCopy } from "react-icons/fi";
 import { Tooltip } from "../tooltip";
 import { toast } from "sonner";
@@ -10,8 +11,8 @@ import "prismjs/themes/prism-tomorrow.css";
 import "prismjs/components/prism-go";
 
 export function Code({ code, language }: CodeProps): ReactElement {
-  const copyToClipboard = (): void => {
-    navigator.clipboard.writeText(code);
+  const copyToClipboard = async(): Promise<void> => {
+    await navigator.clipboard.writeText(code);
 
     toast.success("Copied to clipboard!");
   };
@@ -26,7 +27,7 @@ export function Code({ code, language }: CodeProps): ReactElement {
         <Tooltip text="Copy to clipboard!">
           <FiCopy
             className="text-white text-xl brightness-75 cursor-pointer hover:brightness-100 active:scale-95"
-            onClick={() => copyToClipboard()}
+            onClick={() => void copyToClipboard()}
           />
         </Tooltip>
       </span>

src/lib/components/atoms/divider/divider.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { DividerProps } from "./divider.type";
+import type { DividerProps } from "./divider.type";
 import { clsx } from "clsx";
 
 export function Divider({ className, ...props }: DividerProps): ReactElement {

src/lib/components/atoms/text/text.tsx

@@ -1,6 +1,6 @@
 import { clsx } from "clsx";
-import { ReactElement } from "react";
-import { TextProps } from "./text.type";
+import type { ReactElement } from "react";
+import type { TextProps } from "./text.type";
 
 export function Text({ children, type, color, size, className, ...props }: TextProps): ReactElement {
   const style = clsx(className, {

src/lib/components/atoms/text/text.type.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PropsWithChildren } from "react";
+import type { HTMLAttributes, PropsWithChildren } from "react";
 
 export type TextProps = PropsWithChildren & HTMLAttributes<HTMLParagraphElement> & {
   type?: "p" | "h3" | "h2" | "h1";

src/lib/components/atoms/tooltip/tooltip.tsx

@@ -1,6 +1,6 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import * as HoverCard from "@radix-ui/react-hover-card";
-import { TooltipProps } from "./tooltip.type";
+import type { TooltipProps } from "./tooltip.type";
 import { Text } from "#/lib/components/atoms/text";
 
 export function Tooltip({ text, children }: TooltipProps): ReactElement {

src/lib/components/atoms/tooltip/tooltip.type.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 export type TooltipProps = PropsWithChildren & {
   text: string;

src/lib/components/layouts/navbar/navbar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { ReactElement, useState } from "react";
+import type { ReactElement } from "react";
+import { useState } from "react";
 import { navbarPages } from "#/lib/configs/navbar";
 import { NavbarItem } from "./navbav-item";
 import { Theme } from "#/lib/components/molecules/theme";

src/lib/components/layouts/navbar/navbar.type.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes } from "react";
+import type { AnchorHTMLAttributes } from "react";
 
 export type NavbarItemProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   label: string;

src/lib/components/layouts/navbar/navbav-item.tsx

@@ -1,5 +1,5 @@
-import { ReactElement } from "react";
-import { NavbarItemProps } from "./navbar.type";
+import type { ReactElement } from "react";
+import type { NavbarItemProps } from "./navbar.type";
 import { FiExternalLink } from "react-icons/fi";
 import { Text } from "#/lib/components/atoms/text";
 import { clsx } from "clsx";

src/lib/components/molecules/burger/burger.tsx

@@ -1,8 +1,9 @@
 import { clsx } from "clsx";
 import { usePathname } from "next/navigation";
-import { ReactElement, useEffect } from "react";
+import type { ReactElement } from "react";
+import { useEffect } from "react";
 import { FiMenu, FiX } from "react-icons/fi";
-import { BurgerProps } from "./burger.type";
+import type { BurgerProps } from "./burger.type";
 
 export function Burger({ open, setOpen, className, ...props }: BurgerProps): ReactElement {
   // Close the burger menu when the user navigates to a new page:

src/lib/components/molecules/burger/burger.type.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, SVGAttributes } from "react";
+import type { Dispatch, SetStateAction, SVGAttributes } from "react";
 
 export type BurgerProps = SVGAttributes<SVGElement> & {
   open: boolean;

src/lib/components/molecules/go-get-button/go-get-button.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import { Tooltip } from "#/lib/components/atoms/tooltip";
-import { Button, ButtonProps } from "#/lib/components/atoms/button";
+import type { ButtonProps } from "#/lib/components/atoms/button";
+import { Button } from "#/lib/components/atoms/button";
 import { FiCopy } from "react-icons/fi";
 import { goscord } from "#/lib/configs/goscord";
 import { toast } from "sonner";
@@ -11,14 +12,14 @@ import { copyToClipboard } from "#/lib/utils/clipboard";
 
 export function GoGetButton({ className, ...props }: ButtonProps): ReactElement {
   const copyText = async(): Promise<void> => {
-    copyToClipboard(goscord.github.install);
+    await copyToClipboard(goscord.github.install);
 
     toast.success("Command copied to clipboard!");
   };
 
   return (
     <Tooltip text="Copy to clipboard!">
-      <Button icon={<FiCopy />} onClick={() => copyText()} className={clsx("font-mono", className)} {...props}>
+      <Button icon={<FiCopy />} onClick={() => void copyText()} className={clsx("font-mono", className)} {...props}>
         {goscord.github.install}
       </Button>
     </Tooltip>

src/lib/components/molecules/notification/notification.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import { Toaster } from "sonner";
 
 export function Notification(): ReactElement {

src/lib/components/molecules/promote/promote.tsx

@@ -1,6 +1,6 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import { Text } from "#/lib/components/atoms/text";
-import { PromoteProps } from "./promote.type";
+import type { PromoteProps } from "./promote.type";
 
 export function Promote({ icon, title, description }: PromoteProps): ReactElement {
   return (

src/lib/components/molecules/promote/promote.type.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 
 export type PromoteProps = {
   icon: ReactElement;

src/lib/components/molecules/statistic/statistic.tsx

@@ -1,6 +1,6 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import { Text } from "#/lib/components/atoms/text";
-import { StatisticProps } from "./statistic.type";
+import type { StatisticProps } from "./statistic.type";
 
 export function Statistic({ icon, count, text }: StatisticProps): ReactElement {
   return (

src/lib/components/molecules/statistic/statistic.type.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 
 export type StatisticProps = {
   icon: ReactElement;

src/lib/components/molecules/team-card/team-card.tsx

@@ -1,5 +1,5 @@
-import { ReactElement } from "react";
-import { TeamCardProps } from "./team-card.type";
+import type { ReactElement } from "react";
+import type { TeamCardProps } from "./team-card.type";
 import { Text } from "#/lib/components/atoms/text";
 import { TeamMemberLink } from "./team-member-link";
 import Image from "next/image";

src/lib/components/molecules/theme/theme.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 import { Text } from "#/lib/components/atoms/text";
 import { FiSun, FiMoon } from "react-icons/fi";
 import { useThemeStore } from "#/lib/stores/theme";

src/lib/configs/footer/footer.config.ts

@@ -1,5 +1,5 @@
 import { goscord } from "#/lib/configs/goscord";
-import { FooterLinks } from "./footer.type";
+import type { FooterLinks } from "./footer.type";
 
 export const footerLinks: FooterLinks[] = [
   {

src/lib/configs/navbar/navbar.config.ts

@@ -1,5 +1,5 @@
 import { goscord } from "#/lib/configs/goscord";
-import { NavbarItem } from "./navbar.type";
+import type { NavbarItem } from "./navbar.type";
 
 export const navbarPages: NavbarItem[] = [
   { label: goscord.webiste.domain, href: "/" },

src/lib/configs/promote/promote.config.tsx

@@ -1,5 +1,5 @@
 import { FiBarChart, FiHeart, FiMonitor, FiZap } from "react-icons/fi";
-import { Promote } from "./promote.type";
+import type { Promote } from "./promote.type";
 
 export const promotes: Promote[] = [
   {

src/lib/configs/promote/promote.type.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
 
 export type Promote = {
   icon: ReactElement;