From 236ded1a8247ffab7220610acb9e0d92b4753d9a Mon Sep 17 00:00:00 2001 From: Atash03 Date: Mon, 26 Jan 2026 11:07:42 +0500 Subject: [PATCH] fix: unwrap async params with React.use() for Next.js 15 compatibility All client-side dynamic route pages were accessing params directly instead of unwrapping the Promise, which Next.js 15 now requires. --- app/(main)/[page_id]/page.tsx | 9 +++++---- app/(main)/quiz/[quiz_id]/page.tsx | 15 ++++++++------- app/(main)/quiz/[quiz_id]/results/page.tsx | 15 ++++++++------- app/(main)/vote/[vote_id]/page.tsx | 9 ++++++--- app/(prizes)/prizes/[user_id]/page.tsx | 11 ++++++----- 5 files changed, 33 insertions(+), 26 deletions(-) diff --git a/app/(main)/[page_id]/page.tsx b/app/(main)/[page_id]/page.tsx index 840ae31..1c8cf15 100644 --- a/app/(main)/[page_id]/page.tsx +++ b/app/(main)/[page_id]/page.tsx @@ -13,21 +13,22 @@ import { dehydrate, useQuery } from '@tanstack/react-query'; import { data } from 'autoprefixer'; import Head from 'next/head'; import Image from 'next/image'; -import { useContext } from 'react'; +import { use, useContext } from 'react'; import { useMediaQuery } from 'usehooks-ts'; interface IParams { - params: { + params: Promise<{ page_id: string; - }; + }>; } const PageItem = ({ params }: IParams) => { + const { page_id } = use(params); const responsive = useMediaQuery('(max-width: 768px)'); const { data, isFetching, error } = useQuery({ queryKey: ['page_item'], - queryFn: () => Queries.getPage(params.page_id), + queryFn: () => Queries.getPage(page_id), }); if (isFetching) return ; diff --git a/app/(main)/quiz/[quiz_id]/page.tsx b/app/(main)/quiz/[quiz_id]/page.tsx index fb0ad77..31483f6 100644 --- a/app/(main)/quiz/[quiz_id]/page.tsx +++ b/app/(main)/quiz/[quiz_id]/page.tsx @@ -13,16 +13,17 @@ import { useQuizSearchActive, useSteps } from "@/store/store"; import { Validator } from "@/utils/validator"; import Image from "next/image"; import Link from "next/link"; -import { useEffect, useState } from "react"; +import { use, useEffect, useState } from "react"; import { useMediaQuery } from "usehooks-ts"; interface IParams { - params: { + params: Promise<{ quiz_id: string; - }; + }>; } const page = ({ params }: IParams) => { + const { quiz_id } = use(params); const [quizFinished, setQuizFinished] = useState(false); const [data, setData] = useState(); const { active } = useQuizSearchActive(); @@ -31,7 +32,7 @@ const page = ({ params }: IParams) => { useEffect(() => { const local_info = sessionStorage.getItem("TURKMENTV_QUIZ_INFO"); - if (!params.quiz_id) { + if (!quiz_id) { Queries.getQuizQuestions().then((res) => { setData(res); if (res.data.questions) { @@ -63,7 +64,7 @@ const page = ({ params }: IParams) => { } }); } else { - Queries.getQuiz(params.quiz_id).then((res) => { + Queries.getQuiz(quiz_id).then((res) => { setData(res); if (res.data.questions) { res.data.questions.map((question) => @@ -201,7 +202,7 @@ const page = ({ params }: IParams) => { ))} Netije @@ -212,7 +213,7 @@ const page = ({ params }: IParams) => { {data?.data && !active ? ( ; } const Page = ({ params }: IParams) => { + const { quiz_id } = use(params); const [data, setData] = useState(); const [tab, setTab] = useState(0); const [loading, setLoading] = useState(false); @@ -26,7 +27,7 @@ const Page = ({ params }: IParams) => { const local_info = sessionStorage.getItem("TURKMENTV_QUIZ_RESULTS"); if (!resultData.length && !error) { setLoading(true); - Queries.getQuizById(params.quiz_id) + Queries.getQuizById(quiz_id) .then((res) => { setData(res.data); if (res.data.steps?.length) { @@ -68,7 +69,7 @@ const Page = ({ params }: IParams) => {
- + { /> {tab === "results" && ( String(item.tapgyr)) : [] } @@ -89,7 +90,7 @@ const Page = ({ params }: IParams) => { tab !== "results" && ( diff --git a/app/(main)/vote/[vote_id]/page.tsx b/app/(main)/vote/[vote_id]/page.tsx index 0d1f9e4..48be832 100644 --- a/app/(main)/vote/[vote_id]/page.tsx +++ b/app/(main)/vote/[vote_id]/page.tsx @@ -1,20 +1,23 @@ 'use client'; import ParticipantsList from '@/components/vote/ParticipantsList'; import VoteProvider from '@/providers/VoteProvider'; +import { use } from 'react'; interface IParams { - params: { + params: Promise<{ vote_id: string; - }; + }>; } const page = ({ params }: IParams) => { + const { vote_id } = use(params); + return (
- +
diff --git a/app/(prizes)/prizes/[user_id]/page.tsx b/app/(prizes)/prizes/[user_id]/page.tsx index 95579ac..f1722a6 100644 --- a/app/(prizes)/prizes/[user_id]/page.tsx +++ b/app/(prizes)/prizes/[user_id]/page.tsx @@ -1,6 +1,6 @@ 'use client'; import PrizeCard from '@/components/prizes/PrizeCard'; -import { useState, useEffect } from 'react'; +import { use, useState, useEffect } from 'react'; import axios from 'axios'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { GiftsType } from '@/typings/gifts/gifts.type'; @@ -15,7 +15,8 @@ interface Prize { description: string; } -const PrizesPage = ({ params }: { params: { user_id: string } }) => { +const PrizesPage = ({ params }: { params: Promise<{ user_id: string }> }) => { + const { user_id } = use(params); const [selectedPrize, setSelectedPrize] = useState(null); const queryClient = useQueryClient(); const router = useRouter(); @@ -23,10 +24,10 @@ const PrizesPage = ({ params }: { params: { user_id: string } }) => { // Fetching data using TanStack Query const { data, isLoading, error } = useQuery({ - queryKey: [`gifts-${params.user_id}`, params.user_id], + queryKey: [`gifts-${user_id}`, user_id], queryFn: () => axios - .get(`https://sms.turkmentv.gov.tm/api/gifts/${params.user_id}`) + .get(`https://sms.turkmentv.gov.tm/api/gifts/${user_id}`) .then((response) => response.data), }); @@ -90,7 +91,7 @@ const PrizesPage = ({ params }: { params: { user_id: string } }) => { } setSelectedPrize={setSelectedPrize} id={prize.id} - code={params.user_id} + code={user_id} {...prize} /> ))}