Merge pull request #13 from roqqetmedia/develop

Nextjs 15 + tw 4

README.md

@@ -6,10 +6,10 @@
 
 ## Features
 
-- Next.js 14
-- React.js 18
+- Next.js 15
+- React.js 19
 - TypeScript 5
-- TailwindCSS 3
+- TailwindCSS 4
 - Framer Motion
 - Absolute Import and Path Alias — Import components using `@/` prefix
 - ESLint

eslint.config.mjs

@@ -0,0 +1,71 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: {
+    env: {
+      browser: true,
+      es2021: true,
+      node: true,
+    },
+  },
+});
+
+const eslintConfig = [
+  {
+    ignores: ["**/node_modules/", "**/.next/", "**/dist/"],
+  },
+  {
+    languageOptions: {
+      ecmaVersion: 2021,
+      sourceType: "module",
+      globals: {
+        React: true,
+        JSX: true,
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
+  ...compat.extends(
+    "eslint:recommended",
+    "next",
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ),
+  {
+    rules: {
+      "no-unused-vars": "off",
+      "no-console": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-var-requires": "off",
+      "react/no-unescaped-entities": "off",
+      "react/display-name": "off",
+      "react/jsx-curly-brace-presence": [
+        "warn",
+        { props: "never", children: "never" },
+      ],
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
+];
+
+export default eslintConfig;

package.json

@@ -13,31 +13,32 @@
     "typecheck": "tsc --noEmit --incremental false"
   },
   "dependencies": {
-    "framer-motion": "^11.11.11",
-    "next": "^14.2.16",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@tailwindcss/postcss": "^4.0.3",
+    "framer-motion": "^12.2.0",
+    "next": "^15.1.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sharp": "^0.33.5"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.15",
-    "@types/node": "^22.8.6",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.12.2",
-    "@typescript-eslint/parser": "^8.12.2",
-    "autoprefixer": "^10.4.20",
+    "@eslint/eslintrc": "^3.2.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/node": "^22.13.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.23.0",
+    "@typescript-eslint/parser": "^8.23.0",
     "clsx": "^2.1.1",
-    "eslint": "^9.13.0",
-    "eslint-config-next": "^15.0.2",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint": "^8.57.1",
-    "lint-staged": "^15.2.10",
-    "postcss": "^8.4.47",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3"
+    "eslint": "9.18.0",
+    "eslint-config-next": "^15.1.6",
+    "eslint-config-prettier": "^10.0.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
+    "postcss": "^8.5.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss": "^4.0.3",
+    "typescript": "^5.7.3"
   }
 }

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

src/app/(root)/layout.tsx

@@ -13,7 +13,7 @@ import "@/app/globals.css";
 
 export const metadata = {
   title: {
-    template: `%s |${metaTitle}`,
+    template: `%s | ${metaTitle}`,
     default: metaTitle,
   },
   description: metaDesc,
@@ -60,7 +60,7 @@ interface RootLayoutProps {
   children: ReactNode;
 }
 
-export default function RootLayout({ children }: RootLayoutProps) {
+export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
   return (
     <html lang="en">
       <body

src/app/globals.css

@@ -1,24 +1,15 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-@layer base {
-  html {
-    @apply !scroll-smooth;
-  }
-  a,
-  button,
-  svg {
-    @apply text-black duration-300;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  span {
-    @apply text-black;
-  }
+@plugin "@tailwindcss/typography";
+
+@theme inline {
+  --font-sans: var(--font-montserrat);
+}
+
+@theme {
+  --z-index-1: 1;
+  --z-index-2: 2;
+  --z-index-3: 3;
+  --z-index-4: 4;
+  --z-index-5: 5;
 }

src/ui/footer/footer.tsx

@@ -2,7 +2,7 @@ import FooterContentContainer from "./footer-content-container";
 
 export default function Footer() {
   return (
-    <footer className="xs:my-8 mb-5 mt-10">
+    <footer className="xs:my-8 mt-10 mb-5">
       <FooterContentContainer />
     </footer>
   );

src/ui/header/header-content-container.tsx

@@ -29,6 +29,7 @@ export default function HeaderContentContainer() {
               loadingAnimation,
             )}
             onLoad={handleOnLoadingComplete}
+            priority
             src="/images/roqqetmedia.svg"
             alt="Roqqet Media"
             width={721}

src/ui/home/hero-content-container.tsx

@@ -27,6 +27,7 @@ export default function HeroContentContainer() {
         >
           <Image
             loading="eager"
+            priority
             fill
             src="/images/roqqetman.svg"
             alt="RoqqetMan"

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,