[FEAT] Support Nextjs v15

[jackytank]

Is your feature request related to a problem? Please describe.

❤️

Describe alternatives you've considered

❤️

Additional context

Hi I'm currently using Refine + Antd + Nextjs project in my company and the slow compiling time of Nextjs 13 is killing my teammates, so Nextjs 15 support in Refine would be great at the time being Nextjs v15.0.1 is marked as stable now

Describe the thing to improve

Luv u guys

[BatuhanW]

Hey @jackytank thanks for the issue. Did you try using it with NextJS 15? Please let us know if you have any specific issues, so we can better help. Since it also uses app router, it shouldn't have a breaking change on our side, but we didn't test it yet.

[jackytank]

• My project created by this preset npm create refine-app@latest -- --preset refine-antd when I follow this guide (https://ant.design/docs/react/use-with-refine)
  • my environment: node v21.1.0, npm 10.9.0
• After create the project, I had update some of the package manually, and this is my current package.json with nextjs 15

{
  "name": "my-refine-remix-app",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": ">=18.0.0"
  },
  "scripts": {
    "dev": "cross-env NODE_OPTIONS=--max_old_space_size=4096 refine dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "refine": "refine"
  },
  "dependencies": {
    "@ant-design/icons": "^5.0.1",
    "@ant-design/nextjs-registry": "^1.0.1",
    "@aws-sdk/client-cloudwatch": "^3.670.0",
    "@aws-sdk/client-cloudwatch-logs": "^3.670.0",
    "@aws-sdk/client-lambda": "^3.670.0",
    "@aws-sdk/client-s3": "^3.670.0",
    "@aws-sdk/client-sqs": "^3.670.0",
    "@refinedev/antd": "^5.43.1",
    "@refinedev/cli": "^2.16.39",
    "@refinedev/core": "^4.55.0",
    "@refinedev/devtools": "^1.2.9",
    "@refinedev/kbar": "^1.3.6",
    "@refinedev/nextjs-router": "^6.1.0",
    "@refinedev/simple-rest": "^5.0.1",
    "antd": "^5.21.3",
    "dayjs": "^1.11.13",
    "js-cookie": "^3.0.5",
    "json-edit-react": "^1.17.0",
    "lodash": "^4.17.21",
    "next": "^15.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "ssh2-sftp-client": "^11.0.0"
  },
  "devDependencies": {
    "@types/js-cookie": "^3.0.6",
    "@types/lodash": "^4.17.10",
    "@types/node": "^18.16.2",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.1",
    "@types/ssh2-sftp-client": "^9.0.4",
    "@typescript-eslint/parser": "^6.21.0",
    "cross-env": "^7.0.3",
    "eslint": "^8",
    "eslint-config-next": "^14.1.0",
    "typescript": "^5.4.2"
  }
}

• After upgrade to Next 15, I encounter these errors
  

• Then I F12 open browser Dev tool, then a lot of error keep spawning infinitely
  

• About the error cookies().get("theme") in above image I fixed it in src/app/page.tsx like this
  

• Then there are a lot of errors still there
  
  

• I panicked so I reverted back to Next 13, I hope those info can help you guys

[BatuhanW]

Hey @jackytank I created an example using npm create refine-app@latest -- --example with-nextjs next-15-test command, as you mentioned, I had to await cookies() call.

Other than that, there are errors caused by ant design, which I should believe they should be warnings.

We need to update our template to have await on cookies() call but other than that I couldn't find any error related to Refine.

I can navigate around example's pages without any issues. This means our NextJS router works as expected. None of these errors should block using Next 15 with Refine.

[jackytank]

Hey @jackytank I created an example using npm create refine-app@latest -- --example with-nextjs next-15-test command, as you mentioned, I had to await cookies() call.

Other than that, there are errors caused by ant design, which I should believe they should be warnings.

We need to update our template to have await on cookies() call but other than that I couldn't find any error related to Refine.

I can navigate around example's pages without any issues. This means our NextJS router works as expected. None of these errors should block using Next 15 with Refine.

oh I see so the errors are coming from Ant Design, I'll head over to antd repo and notify them to update, so I guess I need to wait a little more time until antd teams fix those errors, other than that Refine + next 13 is great

[alicanerdurmaz]

Hello everyone,

We have released support for Next.js 15 and we build an example that works with Next.js 15.

But unfortunately, npm create refine-app@latest does not currently support Next.js 15 because other integrations like Ant Design and Material UI also need to support Next.js 15 to ensure the application works smoothly.

If you're using Refine in a headless mode, you can upgrade to Next.js 15 or create a Refine project with Next.js 15 support using the following command:

npm create refine-app@latest -- --example with-nextjs-headless

Upgrade Notes

There are no breaking changes in Refine usage; however, you may need to update your application for React 19 and Next.js 15. You can find detailed information in the following links:

• Next.js 15 Upgrade Guide
• React 19 Upgrade Guide

If you encounter any issues, please let us know! 🚀