Update/next15: Upgrade version of nextjs from 14 to 15

README.md

@@ -1,10 +1,10 @@
 # NextJS-App-Router-All-In-One
 
-`Next14 + App router` boilerplate
+`Next15 + App router` boilerplate
 
 ## How to use
 
-- Framework: [`NextJS14`](https://nextjs.org/)(Using [`App Router`](https://nextjs.org/docs/app))
+- Framework: [`NextJS15`](https://nextjs.org/)(Using [`App Router`](https://nextjs.org/docs/app))
 - Compiler: [`SWC`](https://swc.rs/)
 - Styling: [`styled-component`](https://styled-components.com/)
 - Testing tool: [`Jest`](https://jestjs.io/) + [`React Testing Library`](https://testing-library.com/docs/react-testing-library/intro/)

package.json

@@ -20,46 +20,47 @@
     "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\""
   },
   "dependencies": {
-    "next": "14.2.13",
-    "react": "^18",
-    "react-dom": "^18",
+    "next": "15.1.0",
+    "react": "^19",
+    "react-dom": "^19",
     "sharp": "^0.33.5",
     "styled-components": "^6.1.13"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^2",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/nextjs": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@swc/plugin-styled-components": "^3.0.2",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/jest": "^29.5.13",
+    "@chromatic-com/storybook": "^3",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/nextjs": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@swc/plugin-styled-components": "^6.0.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@types/jest": "^29.5.14",
     "@types/node": "^22",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "cypress": "^13.14.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "cypress": "^13.16.1",
     "eslint": "^9",
-    "eslint-config-next": "14.2.13",
+    "eslint-config-next": "15.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-storybook": "^0.9.0",
-    "husky": "^9.1.6",
+    "eslint-plugin-storybook": "^0.11.1",
+    "husky": "^9.1.7",
     "isomorphic-fetch": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
-    "ora": "^8.1.0",
+    "ora": "^8.1.1",
     "plop": "^4.0.1",
-    "prettier": "^3.3.3",
-    "storybook": "^8.3.6",
+    "prettier": "^3.4.2",
+    "start-server-and-test": "^2.0.9",
+    "storybook": "^8.4.7",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "^5"
   },
   "resolutions": {

src/app/api/cars/[detail]/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 
-export async function GET(_: NextRequest, { params: { detail } }: { params: { detail: string } }) {
+export async function GET(_: NextRequest, { params }: { params: Promise<{ detail: string }> }) {
+  const { detail } = await params;
   const res = await fetch(`https://647de137af984710854a86f2.mockapi.io/api/v1/cars/${detail}`);
 
   const data = await res.json();

src/app/cars/[detail]/page.tsx

@@ -12,11 +12,8 @@ async function getCarDetail(detail: string): Promise<Car> {
   return res.json();
 }
 
-export default async function CarsDetailPage({
-  params: { detail },
-}: {
-  params: { detail: string };
-}) {
+export default async function CarsDetailPage({ params }: { params: Promise<{ detail: string }> }) {
+  const { detail } = await params;
   const car = await getCarDetail(detail);
 
   return (

src/libs/CustomStyledComponent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { JSX, useState } from 'react';
 
 import { useServerInsertedHTML } from 'next/navigation';
 

src/libs/customRender.tsx

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import type { RenderOptions } from '@testing-library/react';
+import { JSX } from 'react';
 
 import 'jest-styled-components';