upgrading 12.1.6 to latest version
Unanswered
Singapura posted this in #help-forum
SingapuraOP
Hello,
my client have Purchased the Nextjs Template from ThemeForest or somewhere, and the Nextjs Template have the version of
Furthermore, I noticed that the code don't have
any help on this
my client have Purchased the Nextjs Template from ThemeForest or somewhere, and the Nextjs Template have the version of
12.1.6 which follows the Pages Router, how can I upgrade the version to the latest one but stay on the pages router only? is that possible?Furthermore, I noticed that the code don't have
next.config.js as well.any help on this
89 Replies
SingapuraOP
"dependencies": {
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"caniuse-lite": "^1.0.30001754",
"formik": "^2.4.9",
"isomorphic-unfetch": "^3.1.0",
"jwt-decode": "^4.0.0",
"next": "12.1.6",
"next-auth": "^4.24.13",
"node-cache": "^5.1.2",
"rc-slider": "^10.0.0",
"react": "18.1.0",
"react-bootstrap": "^2.4.0",
"react-content-loader": "^6.2.0",
"react-dom": "18.1.0",
"react-img-zoom": "^0.1.0",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^8.0.2",
"react-responsive-modal": "^6.2.0",
"react-slick": "^0.29.0",
"react-toast-notifications": "^2.5.1",
"react-toastify": "^9.1.3",
"reactstrap": "^9.1.1",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"select2": "^4.1.0-rc.0",
"swiper": "^8.2.2",
"wowjs": "^1.1.3",
"yup": "^1.7.1"
}this is my package.json, and now when I am trying Upgrading Guide -- https://nextjs.org/docs/pages/guides/upgrading/version-13
and doing
npm i next@13 react@latest react-dom@latest eslint-config-next@13 then I am getting below error:npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: evara@0.1.0
npm error Found: react@19.2.0
npm error node_modules/react
npm error react@"19.2.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.2.0" from next@13.5.11
npm error node_modules/next
npm error next@"13" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\dhaval\AppData\Local\npm-cache\_logs\2025-11-14T07_50_20_363Z-eresolve-report.txt
npm error A complete log of this run can be found in:@alfonsüs ardani you can try following the upgrade guide:
https://nextjs.org/docs/pages/guides/upgrading/version-13
https://nextjs.org/docs/app/guides/upgrading/version-14
https://nextjs.org/docs/app/guides/upgrading/version-15
https://nextjs.org/docs/app/guides/upgrading/version-16
SingapuraOP
any help what's the issue?
and doing npm i next@13 react@latest react-dom@latest eslint-config-next@13 then I am getting below error:
yeah this command might not work.
try
npm i next@13 react@18.2.0 react-dom@18.2.0 eslint-config-next@13but
next.config.js missing in the root@Singapura but `next.config.js` missing in the root
is it giving a warning?
@alfonsüs ardani is it giving a warning?
SingapuraOP
nope it's not, but when we use
Image from Nextjs, then that time we need to define the protocol to allow it, right?yeah you can just copy paste from new nextjs13 project right?
@alfonsüs ardani yeah you can just copy paste from new nextjs13 project right?
SingapuraOP
I don't have any Nextjs 13 project for now
then make one
pnpm create next-app@13 .npx create-next-app@13 .SingapuraOP
Okay!. Thanks
do I need to take care of anything after upgrading it to Nextjs v13? @alfonsüs ardani
yes, you need to upgrade to v14, then v15 then v16
SingapuraOP
but does upgrading it to till v16, does it still going to support Page Router?
it will support page router
there isn't much change in pages router in 14 -> 16
SingapuraOP
I'll check, and text you back, if I stuck & need your help again
@alfonsüs ardani and first to v14 from v13, then from v14 to v16, is that right Sir?
i guess so. i havent tried sorry
SingapuraOP
"dependencies": {
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"caniuse-lite": "^1.0.30001754",
"eslint-config-next": "^13.5.11",
"formik": "^2.4.9",
"isomorphic-unfetch": "^3.1.0",
"jwt-decode": "^4.0.0",
"next": "^14.2.33",
"next-auth": "^4.24.13",
"node-cache": "^5.1.2",
"rc-slider": "^10.0.0",
"react": "^18.3.1",
"react-bootstrap": "^2.4.0",
"react-content-loader": "^6.2.0",
"react-dom": "^18.3.1",
"react-img-zoom": "^0.1.0",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^8.0.2",
"react-responsive-modal": "^6.2.0",
"react-slick": "^0.29.0",
"react-toast-notifications": "^2.5.1",
"react-toastify": "^9.1.3",
"reactstrap": "^9.1.1",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"select2": "^4.1.0-rc.0",
"swiper": "^8.2.2",
"wowjs": "^1.1.3",
"yup": "^1.7.1"
}npm i next@next-14 react@18 react-dom@18 && npm i eslint-config-next@next-14 -D --- throws below error:@alfonsüs ardani
seems like your react-hot-toast is outdated
you know there is other packages that might not support the newer version or like you have to match the version of the other packages
SingapuraOP
I guess it's
react-responsive-modalI am not sure, if I am trying
pm i react-responsive-modal@7.1.0 then getting error for react-toast-notificationsdoes react-responsive-modal suports react18? coz next 14 donest use react 16 anymore :( and requires minimum of next 16
SingapuraOP
I dont know, because when I am trying to upgrade
react-responsive-modal then, react-toast-notifications are throwing error, so don't understandor maybe I need to insall everything together like
package-one@latest package-two@latest@Singapura I dont know, because when I am trying to upgrade `react-responsive-modal` then, `react-toast-notifications` are throwing error, so don't understand
thats normal if react-responsive-modal uses react-toast-notifications
SingapuraOP
react-toast-notifications I've this in my package.jsonjust resolve the package one by one
upgrade the packages to the version that supports react 18
SingapuraOP
how? means like installing/upgrading one by one?
yeah
@alfonsüs ardani yeah
SingapuraOP
oka
and is no longer maintained
and next13 minimum react requirement is react 18
u have to fine replacement or fork to update react-toast-notification to react 18
or find if someone already did it
SingapuraOP
oka
SingapuraOP
now everything is updated, now can I upgrade to v15 (https://nextjs.org/docs/app/guides/upgrading/version-15)?
ok goodluck brother
SingapuraOP
but I don't know & confused that v15 & v16 still supports Page Router? @alfonsüs ardani
SingapuraOP
if it's supported then only I will proceed to upgrade till v16
you just wont be able to use the latest react features
SingapuraOP
that's fine, but if the support is there is more important for me
because this Project is of a Client, and they've purchased the Template
it is supported, it just aint popular
SingapuraOP
what to do in this @alfonsüs ardani
no clue haha
toggle all and enter?
those changes are mostly on app dir and i dont think you're affected
SingapuraOP
so what to do @alfonsüs ardani 😰
click it
@alfonsüs ardani toggle all and enter?
SingapuraOP
it's coming to this
do that
SingapuraOP
oka
⚠ The "middleware" file convention is deprecated. Please use "proxy" instead. Learn more: https://nextjs.org/docs/messages/middleware-to-proxy
@alfonsüs ardani
have you tried doing that the error says?
SingapuraOP
it's they've transformed from middleware to proxy
and i have this middleware for
next-auth but I don't know why it doesn't seems workingso do you have middleware or proxy?
SingapuraOP
import { withAuth } from "next-auth/middleware";
import { NextResponse } from "next/server";
/**
* Middleware for protecting customer routes
* All routes in the matcher config will be checked for authentication
*/
export default withAuth(
function middleware(req) {
const token = req.nextauth.token;
const pathname = req.nextUrl.pathname;
// If token has error (expired), redirect to sign in
if (token?.error === "TokenExpiredError") {
return NextResponse.redirect(
new URL(
`/auth/signin?error=SessionExpired&callbackUrl=${encodeURIComponent(
pathname
)}`,
req.url
)
);
}
// Check token expiry manually
if (token?.tokenExpiry) {
const currentTime = Math.floor(Date.now() / 1000);
// If token is expired, redirect to sign in
if (currentTime >= token.tokenExpiry) {
return NextResponse.redirect(
new URL(
`/auth/signin?error=SessionExpired&callbackUrl=${encodeURIComponent(
pathname
)}`,
req.url
)
);
}
}
// Allow the request to continue if authenticated and token is valid
return NextResponse.next();
},
{
callbacks: {
/**
* Determines if user is authorized to access the route
* @param {Object} params - Contains token
* @returns {boolean} True if authorized
*/
authorized: ({ token }) => {
// User must have a valid token without errors
return !!token && !token.error;
},
},
}
);
/**
* Configure which routes this middleware protects
* These are customer-only routes that require authentication
*
* Pattern matching:
* - /checkout/:path* matches /checkout, /checkout/payment, /checkout/review, etc.
* - /cart matches exactly /cart (no :path* needed for exact match)
*/
export const config = {
matcher: ["/cart"],
};this is my
middleware.jshave you tried doing what the error says?
SingapuraOP
not yet
why not
SingapuraOP
npx @next/codemod@canary middleware-to-proxy .
fatal: not a git repository (or any of the parent directories): .git
Thank you for using @next/codemod!
But before we continue, please stash or commit your git changes.
You may use the --force flag to override this safety check.I am getting this, as my
middleware.js is in the root of the project structureand Yes, the current Project is not associated to any git project
thats weird
might need to do it without codemod then
SingapuraOP
oh oka
1 more question, please
SingapuraOP
how to setup multiple
like for
.env in Nextjs? but I will have custom name, and I want to adopt the relevant one...like for
qa build I want to use env.qa, for uat build I want to .env.uat how to achieve it @alfonsüs ardani ?SingapuraOP
OK