v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor and update project components for Next.js 15 compatibility (#6)

Browse source 
* refactor: update all modules to latest version

* refactor: update layout to match nextjs 15 convention

* fix: implement TopProgressBar as Client

* fix: remove unnecessary locale prop

* fix: update postcss.config.js export

* fix: comment out styles

* fix: ref usage in useIntersectionObserver and update Navbar

* chore: performance optimizations

* fix: simplify Loading component structure

* refactor: move ProjectCard component and add prop types validation
This commit is contained in:
Alvalen Shafel 2025-03-18 12:39:32 +07:00 • committed by GitHub
parent 481bc8324e
commit 7f0c142dda
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 3422 additions and 2569 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/(root)/loading.jsx
View file

@ -1,11 +1,7 @@
export default function Loading() {
return (
<>
(
<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
<h1 className="text-4xl text-gray-900">Loading...</h1>
</div>
)
</>
<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
<h1 className="text-4xl text-gray-900">Loading...</h1>
</div>
);
}

1
app/(root)/page.jsx
View file

@ -104,7 +104,6 @@ const MyPage = () => {
href={"/docs/cv.pdf"}
target="_blank"
rel="noopener noreferrer"
locale={false}
download>
Download CV
</Link>

10
app/about/components/quote/useIntersectionObserver.js
View file

@ -17,13 +17,15 @@ export function useIntersectionObserver() {
}
);
if (ref.current) {
observer.observe(ref.current);
const currentRef = ref.current; // Store the ref value in a variable
if (currentRef) {
observer.observe(currentRef);
}
return () => {
if (ref.current) {
observer.unobserve(ref.current);
if (currentRef) {
observer.unobserve(currentRef);
}
};
}, []);

2
app/about/layout.jsx
View file

@ -1,7 +1,7 @@
import Footer from "@/components/Footer";
export const metadata = {
title: "Alvalens | About",
title: "Alvalens | About"
};
export default function Layout({ children }) {
return (

10
app/about/loading.jsx
View file

@ -1,11 +1,7 @@
export default function Loading() {
return (
<>
(
<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
<h1 className="text-4xl text-gray-900">Loading...</h1>
</div>
)
</>
<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
<h1 className="text-4xl text-gray-900">Loading...</h1>
</div>
);
}

9
app/globals.css
View file

@ -3,9 +3,7 @@
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
html {
font-size: 17px !important;
@ -53,9 +51,9 @@ h1, h2, h3, h4, h5, h6 {
}
h2, h3, h4, h5, h6 {
/* h2, h3, h4, h5, h6 {
@apply text-gray-600;
}
} */
span {
font-family: "Jost", sans-serif;
@ -64,6 +62,7 @@ span {
li {
@apply list-none relative;
}
li.active:after {
content: "";
position: absolute;

34
app/layout.jsx
View file

@ -1,4 +1,3 @@
import dynamic from "next/dynamic";
import "./globals.css";
import Navbar from "@/components/Navbar";
import { config } from "@fortawesome/fontawesome-svg-core";
@ -6,15 +5,20 @@ import "@fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;
import "./nprogress.css";
import { Analytics } from "@vercel/analytics/react";
import Chat from "@/components/Chat";
import ClientTopProgressBar from "@/components/ClientTopProgressBar";
export const metadata = {
title: "Alvalens | Portofolio",
description:
title: "Alvalens | Portofolio",
description:
"My name is Alvalens, I'm a web developer and I'm passionate about it. I'm currently studying at Universitas Negeri Malang.",
author: "Alvalen Shafelbilyunazra",
siteUrl: "https://www.alvalens.my.id",
applicationName: "Alvalens",
keywords: [
author: "Alvalen Shafelbilyunazra",
siteUrl: "https://www.alvalens.my.id",
applicationName: "Alvalens",
keywords: [
"alvalens",
"alvalen",
"alvalen shafel",
@ -25,7 +29,8 @@ export const metadata = {
"alvalen porto",
"alvalen um",
],
openGraph: {
openGraph: {
type: "website",
url: "https://www.alvalens.my.id",
title: "Alvalens | Portofolio",
@ -40,23 +45,14 @@ export const metadata = {
},
],
site_name: "Alvalens | Portofolio",
},
}
};
import Chat from "@/components/Chat";
const TopProgressBar = dynamic(() => import("@/components/TopProgressbar"), {
ssr: false,
});
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<TopProgressBar />
<ClientTopProgressBar />
<Navbar />
{children}
<Chat />

17
app/projects/(project-card)/index.jsx
View file

@ -1,10 +1,10 @@
import Link from "next/link";
import { motion } from "framer-motion";
import Image from "next/image";
export default function projectCard({project, index, activeCategory}){
console.log(project.category[0], activeCategory);
console.log(project.category.includes(activeCategory));
return (
import { motion } from "framer-motion";
import PropTypes from "prop-types";
export default function ProjectCard({ project, index, activeCategory }) {
return (
<>
{project.category.includes(parseInt(activeCategory)) && (
<Link href={"projects/" + project.slug} key={index}>
@ -56,3 +56,10 @@ export default function projectCard({project, index, activeCategory}){
</>
);
}
ProjectCard.propTypes = {
project: PropTypes.object.isRequired,
index: PropTypes.number.isRequired,
activeCategory: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
.isRequired,
};

13
app/projects/[slug]/page.jsx
View file

@ -1,5 +1,5 @@
"use client";
import { useState, useEffect } from "react";
import { useState, useEffect, use } from "react";
import { motion } from "framer-motion";
import jsonData from "@/json/data.json";
@ -53,9 +53,10 @@ function ScrollDownButton() {
}
function Page({ params }) {
const [data, setData] = useState(null);
useEffect(() => {
function Page(props) {
const params = use(props.params);
const [data, setData] = useState(null);
useEffect(() => {
const selectedData = jsonData.Projects.find(
(item) => item.slug === params.slug
);
@ -66,7 +67,7 @@ function Page({ params }) {
}
}, [params.slug]);
if (data === "404") {
if (data === "404") {
return (
<>
<NotFound />
@ -98,7 +99,7 @@ function Page({ params }) {
</div>
);
}
return (
return (
<div className="relative min-h-screen w-full gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
<FixedButon href="/projects">
<FontAwesomeIcon

65
app/projects/components/ProjectCard.jsx Normal file
View file

@ -0,0 +1,65 @@
import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";
import PropTypes from "prop-types";
export default function ProjectCard({ project, index, activeCategory }) {
return (
<>
{project.category.includes(parseInt(activeCategory)) && (
<Link href={"projects/" + project.slug} key={index}>
<motion.div
className="z-10 relative flex justify-center items-start flex-col mb-5 md:px-10 w-full h-auto bg-gray-400 group/tes py-20 px-5 md:py-2 aspect-video "
initial={{
opacity: 0,
x: -200,
}}
whileInView={{
opacity: 1,
x: 0,
}}
transition={{
type: "spring",
}}>
<Image
src={project.thumbnail}
alt="Alvalens"
layout="fill"
objectFit="cover"
placeholder="blur"
className="bg-slate-950 opacity-10 group-hover/tes:opacity-100 transition-all ease duration-500"
blurDataURL={project.thumbnail}
/>
<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
<h4 className="text-white">{project.year}</h4>
</div>
<div className="transition-all ease duration-500 opacity-100 content text-center group-hover/tes:opacity-0 z-10">
<h1 className="text-3xl font-bold mb-3">{project.title}</h1>
<p>
{project.desc[0].length > 125
? `${project.desc[0].slice(0, 125)}...`
: project.desc[0]}
</p>
<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
{project.tech.map((t, index) => (
<span
key={index}
className="m-1 px-4 py-2 bg-gray-600 text-white ">
{t}
</span>
))}
</div>
</div>
</motion.div>
</Link>
)}
</>
);
}
ProjectCard.propTypes = {
project: PropTypes.object.isRequired,
index: PropTypes.number.isRequired,
activeCategory: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
.isRequired,
};

2
app/projects/layout.jsx
View file

@ -2,7 +2,7 @@
import Footer from "@/components/Footer";
export const metadata = {
title: "Alvalens | Projects",
title: "Alvalens | Projects"
};
export default function Layout({ children }) {
return (

10
app/projects/loading.jsx
View file

@ -1,11 +1,7 @@
export default function Loading() {
return (
<>
(
<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
<h1 className="text-4xl text-gray-900">Loading...</h1>
</div>
)
</>
<div className="fixed top-0 left-0 flex justify-center items-center h-screen w-screen bg-gray-300 z-[999]">
<h1 className="text-4xl text-gray-900">Loading...</h1>
</div>
);
}

28
app/projects/page.jsx
View file

@ -12,7 +12,7 @@ import ReactChat3 from "@/public/image/projects/web/trivia/trivia3.png";
import ProjectAll from "@/public/image/projects.png";
import Hr from "@/components/Hr";
import ProjectCard from "./(project-card)";
import ProjectCard from "./components/ProjectCard";
import Projects from "@/json/data.json";
import FixedButon from "@/components/FixedButton";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -22,12 +22,11 @@ const category = {
1: "Web Development",
2: "AI & Machine Learning",
9: "Other",
}
};
export default function Page() {
const [activeCategory, setActiveCategory] = useState(1);
const projects = Projects.Projects.filter ((item) => item.show === true
);
const projects = Projects.Projects.filter((item) => item.show === true);
useEffect(() => {
window.scrollTo(0, 0);
@ -36,10 +35,7 @@ export default function Page() {
<>
<main className="overflow-hidden">
<FixedButon href="/#projects">
<FontAwesomeIcon
icon={faChevronLeft}
className="text-black pr-10"
/>
<FontAwesomeIcon icon={faChevronLeft} className="text-black pr-10" />
</FixedButon>
<div className="relative h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col mb-10 overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
@ -181,15 +177,13 @@ export default function Page() {
Generative Trivia
</h2>
<p className="text-gray-600 text-justify title text-lg">
A generative trivia website built with Next.js,
Firebase, NextAuth, Google OAuth, and TypeScript.
Users can generate trivia questions for predefined
school subjects and answer them with a unique
interactive input style. The application supports
user authentication with Google and stores data in
Firestore. You can see the source code of this
project on my github account or preview the project
by clicking the button below.
A generative trivia website built with Next.js, Firebase,
NextAuth, Google OAuth, and TypeScript. Users can generate trivia
questions for predefined school subjects and answer them with a
unique interactive input style. The application supports user
authentication with Google and stores data in Firestore. You can
see the source code of this project on my github account or
preview the project by clicking the button below.
</p>{" "}
<div className="mt-3">
<Button variation="primary">

11
components/ClientTopProgressBar.jsx Normal file
View file

@ -0,0 +1,11 @@
"use client";
import dynamic from "next/dynamic";
const TopProgressBar = dynamic(() => import("@/components/TopProgressbar"), {
ssr: false,
});
export default function ClientTopProgressBar() {
return <TopProgressBar />;
}

20
components/Navbar.jsx
View file

@ -99,7 +99,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
type: "spring",
stiffness: 400,
damping: 40,
},
},
},
};
@ -111,7 +111,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
animate={isNavOpen ? "open" : "closed"}
initial={false}>
<div className="relative backdrop-blur-sm opacity-95 flex flex-col items-center space-x-8 min-h-[100vh] bg-gray-700 min-w-[100vw] ">
<div className="flex flex-col items-center space-y-8 my-auto mx-0">
<div className="flex flex-col items-center space-y-8 my-auto mx-0 z-50">
{/* title */}
<motion.h1
variants={itemVariants}
@ -119,7 +119,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
className="text-6xl font-bold text-white ">
Menu
</motion.h1>
<a href="/#home">
<Link href="/#home">
<div
className="text-2xl font-bold text-white"
onClick={handleItemClick}>
@ -131,7 +131,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
Home
</motion.h2>
</div>
</a>
</Link>
<Link href="/about">
<div
onClick={handleItemClick}
@ -158,7 +158,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
</motion.h2>
</div>
</Link>
<a href="/#contact">
<Link href="/#contact">
<div
onClick={handleItemClick}
className="text-2xl font-bold text-white">
@ -170,7 +170,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
Contact
</motion.h2>
</div>
</a>
</Link>
</div>
</div>
</motion.div>
@ -209,15 +209,11 @@ const Navbar = () => {
onClick={toggleNav}>
<div
className={`w-10 h-1 bg-black rounded-full transition-all ease duration-300 ${
isNavOpen
? "rotate-45 bg-white translate-y-[2px]"
: ""
isNavOpen ? "rotate-45 bg-white translate-y-[2px]" : ""
}`}></div>
<div
className={`w-10 h-1 bg-black rounded-full transition-all ease duration-300 ${
isNavOpen
? "-rotate-45 -translate-y-2 bg-white"
: ""
isNavOpen ? "-rotate-45 -translate-y-2 bg-white" : ""
}`}></div>
</button>
</div>

32
next.config.js
View file

@ -5,6 +5,9 @@ module.exports = withBundleAnalyzer({
// your Next.js configuration
images: {
domains: ["i.scdn.co"],
// Add image optimization settings
formats: ['image/avif', 'image/webp'],
minimumCacheTTL: 60,
},
webpack: (config, options) => {
config.module.rules.push({
@ -23,8 +26,37 @@ module.exports = withBundleAnalyzer({
key: "Content-Type",
value: "application/gzip",
},
{
key: "Cache-Control",
value: "public, max-age=3600", // Cache for 1 hour
},
],
},
{
source: '/:path*',
headers: [
{
key: 'X-Content-Type-Options',
value: 'nosniff',
},
{
key: 'X-Frame-Options',
value: 'DENY',
},
{
key: 'X-XSS-Protection',
value: '1; mode=block',
},
],
},
];
},
// Add performance optimizations
swcMinify: true,
reactStrictMode: true,
compiler: {
removeConsole: process.env.NODE_ENV === 'production' ? {
exclude: ['error', 'warn'],
} : false,
},
});

43
package.json
View file

@ -3,36 +3,37 @@
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev --turbo",
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint",
"generate-sitemap": "node generate-sitemap.js"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@fullpage/react-fullpage": "^0.1.40",
"@vercel/analytics": "^1.0.2",
"autoprefixer": "10.4.15",
"eslint": "8.48.0",
"eslint-config-next": "13.4.19",
"framer-motion": "^10.16.2",
"next": "13.4.19",
"@fortawesome/fontawesome-svg-core": "^6.7.2",
"@fortawesome/free-brands-svg-icons": "^6.7.2",
"@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"@fullpage/react-fullpage": "^0.1.48",
"@tailwindcss/postcss": "^4.0.14",
"@vercel/analytics": "^1.5.0",
"eslint": "9.22.0",
"eslint-config-next": "15.2.3",
"framer-motion": "^12.5.0",
"next": "15.2.3",
"nprogress": "^0.2.0",
"postcss": "8.4.28",
"react": "18.2.0",
"react-dom": "18.2.0",
"sharp": "^0.32.5",
"sitemap": "^7.1.1",
"swr": "^2.2.2",
"tailwindcss": "3.3.3"
"postcss": "^8.5.3",
"prop-types": "^15.8.1",
"react": "19.0.0",
"react-dom": "19.0.0",
"sharp": "^0.33.5",
"sitemap": "^8.0.0",
"swr": "^2.3.3",
"tailwindcss": "^4.0.14"
},
"devDependencies": {
"@next/bundle-analyzer": "^13.4.19",
"@next/bundle-analyzer": "15.2.3",
"cross-env": "^7.0.3"
}
}

5637
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

9
postcss.config.js
View file

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

26
tailwind.config.js
View file

@ -1,12 +1,18 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
important: true,
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
},
plugins: [],
}
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
},
},
plugins: [],
// Add this to reduce CSS file size in production
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
};