diff --git a/.env.sample b/.env.sample index 82a9799..2dc3a29 100644 --- a/.env.sample +++ b/.env.sample @@ -1 +1,2 @@ -NEXT_PUBLIC_BACKEND_API= \ No newline at end of file +NEXT_PUBLIC_BACKEND_API= +NEXT_PUBLIC_GA_ID= \ No newline at end of file diff --git a/package.json b/package.json index ca500fd..3a3c2ae 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "@storybook/blocks": "^7.0.22", "@storybook/nextjs": "^7.0.22", "@storybook/react": "^7.0.22", + "@types/gtag.js": "^0.0.12", "@types/react-infinite-scroller": "^1.2.3", "@types/react-scroll": "^1.8.7", "@types/uuid": "^9.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 28e2159..003cc21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + dependencies: '@emotion/react': specifier: ^11.10.6 @@ -104,10 +108,13 @@ devDependencies: version: 7.0.22(react-dom@18.2.0)(react@18.2.0) '@storybook/nextjs': specifier: ^7.0.22 - version: 7.0.22(@babel/core@7.21.0)(next@13.2.1)(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4) + version: 7.0.22(@babel/core@7.21.0)(esbuild@0.17.19)(next@13.2.1)(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4)(webpack@5.75.0) '@storybook/react': specifier: ^7.0.22 version: 7.0.22(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4) + '@types/gtag.js': + specifier: ^0.0.12 + version: 0.0.12 '@types/react-infinite-scroller': specifier: ^1.2.3 version: 1.2.3 @@ -119,7 +126,7 @@ devDependencies: version: 9.0.2 babel-loader: specifier: ^8.3.0 - version: 8.3.0(@babel/core@7.21.0) + version: 8.3.0(@babel/core@7.21.0)(webpack@5.75.0) cannon: specifier: link:@types/@react-three/cannon version: link:@types/@react-three/cannon @@ -140,7 +147,7 @@ devDependencies: version: 0.6.12(eslint@8.35.0)(typescript@4.7.4) file-loader: specifier: ^6.2.0 - version: 6.2.0 + version: 6.2.0(webpack@5.75.0) hygen: specifier: ^6.2.11 version: 6.2.11 @@ -2702,7 +2709,7 @@ packages: react-refresh: 0.11.0 schema-utils: 3.1.1 source-map: 0.7.4 - webpack: 5.75.0 + webpack: 5.75.0(esbuild@0.17.19) dev: true /@pmndrs/cannon-worker-api@2.3.2(three@0.153.0): @@ -2865,6 +2872,41 @@ packages: zustand: 3.7.2(react@18.2.0) dev: false + /@react-three/fiber@8.13.5(react-dom@18.2.0)(react@18.2.0)(three@0.153.0): + resolution: {integrity: sha512-x9QdsaB/Wm/6NGvRXQahPPWfn2dQce7Fg3C2r00NNzyDdqRKw32YavL+WEqjZOOd0nvFpzv7FtaKc+VCOTR59w==} + peerDependencies: + expo: '>=43.0' + expo-asset: '>=8.4' + expo-gl: '>=11.0' + react: '>=18.0' + react-dom: '>=18.0' + react-native: '>=0.64' + three: '>=0.133' + peerDependenciesMeta: + expo: + optional: true + expo-asset: + optional: true + expo-gl: + optional: true + react-dom: + optional: true + react-native: + optional: true + dependencies: + '@babel/runtime': 7.21.0 + '@types/react-reconciler': 0.26.7 + its-fine: 1.1.0(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-reconciler: 0.27.0(react@18.2.0) + react-use-measure: 2.1.1(react-dom@18.2.0)(react@18.2.0) + scheduler: 0.21.0 + suspend-react: 0.1.3(react@18.2.0) + three: 0.153.0 + zustand: 3.7.2(react@18.2.0) + dev: false + /@rushstack/eslint-patch@1.2.0: resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==} dev: true @@ -3261,7 +3303,7 @@ packages: - supports-color dev: true - /@storybook/builder-webpack5@7.0.22(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4): + /@storybook/builder-webpack5@7.0.22(esbuild@0.17.19)(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4): resolution: {integrity: sha512-JLR9DsRGfwjWYV8vcdCxKwYfawQcU4ED0zVe48e2zywPrWxEgkMsZ9n8hclCPhnKzm5lb0ZOtskCuY+kmZ5lEA==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -3308,12 +3350,12 @@ packages: react-dom: 18.2.0(react@18.2.0) semver: 7.3.8 style-loader: 3.3.1(webpack@5.75.0) - terser-webpack-plugin: 5.3.6(webpack@5.75.0) + terser-webpack-plugin: 5.3.6(esbuild@0.17.19)(webpack@5.75.0) ts-dedent: 2.2.0 typescript: 4.7.4 util: 0.12.5 util-deprecate: 1.0.2 - webpack: 5.75.0 + webpack: 5.75.0(esbuild@0.17.19) webpack-dev-middleware: 5.3.3(webpack@5.75.0) webpack-hot-middleware: 2.25.3 webpack-virtual-modules: 0.4.6 @@ -3658,7 +3700,7 @@ packages: resolution: {integrity: sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==} dev: true - /@storybook/nextjs@7.0.22(@babel/core@7.21.0)(next@13.2.1)(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4): + /@storybook/nextjs@7.0.22(@babel/core@7.21.0)(esbuild@0.17.19)(next@13.2.1)(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4)(webpack@5.75.0): resolution: {integrity: sha512-3JbtdAfscPX3cBkGwPaYodFrU/J7+LVgve4iFN4jwzpFFumxSoXKVrL/sJPqk1h0qtp6tVm0RRRINUaRQAs0Dg==} engines: {node: '>=16.0.0'} peerDependencies: @@ -3695,34 +3737,35 @@ packages: '@babel/preset-typescript': 7.21.0(@babel/core@7.21.0) '@babel/runtime': 7.21.0 '@storybook/addon-actions': 7.0.22(react-dom@18.2.0)(react@18.2.0) - '@storybook/builder-webpack5': 7.0.22(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4) + '@storybook/builder-webpack5': 7.0.22(esbuild@0.17.19)(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4) '@storybook/core-common': 7.0.22 '@storybook/node-logger': 7.0.22 - '@storybook/preset-react-webpack': 7.0.22(@babel/core@7.21.0)(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4) + '@storybook/preset-react-webpack': 7.0.22(@babel/core@7.21.0)(esbuild@0.17.19)(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4) '@storybook/preview-api': 7.0.22 '@storybook/react': 7.0.22(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4) '@types/node': 16.18.13 - css-loader: 6.7.3 + css-loader: 6.7.3(webpack@5.75.0) find-up: 5.0.0 fs-extra: 11.1.0 image-size: 1.0.2 loader-utils: 3.2.1 next: 13.2.1(@babel/core@7.21.0)(react-dom@18.2.0)(react@18.2.0) - node-polyfill-webpack-plugin: 2.0.1 + node-polyfill-webpack-plugin: 2.0.1(webpack@5.75.0) pnp-webpack-plugin: 1.7.0(typescript@4.7.4) postcss: 8.4.21 - postcss-loader: 7.0.2(postcss@8.4.21) + postcss-loader: 7.0.2(postcss@8.4.21)(webpack@5.75.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) resolve-url-loader: 5.0.0 - sass-loader: 12.6.0 + sass-loader: 12.6.0(webpack@5.75.0) semver: 7.3.8 - style-loader: 3.3.1 + style-loader: 3.3.1(webpack@5.75.0) styled-jsx: 5.1.1(@babel/core@7.21.0)(react@18.2.0) ts-dedent: 2.2.0 tsconfig-paths: 4.1.2 tsconfig-paths-webpack-plugin: 3.5.2 typescript: 4.7.4 + webpack: 5.75.0(esbuild@0.17.19) transitivePeerDependencies: - '@swc/core' - '@types/webpack' @@ -3757,7 +3800,7 @@ packages: resolution: {integrity: sha512-l2eTUBzpzwjZQ9DpmTYKgHFUq+blHGu4nQ7AEHJUPEHyBUa4y2OBjm31zU18nUKIjhKBSMtEsuoRtUvYRqaShQ==} dev: true - /@storybook/preset-react-webpack@7.0.22(@babel/core@7.21.0)(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4): + /@storybook/preset-react-webpack@7.0.22(@babel/core@7.21.0)(esbuild@0.17.19)(react-dom@18.2.0)(react@18.2.0)(typescript@4.7.4): resolution: {integrity: sha512-K++Q4GADN9iIFWvva+XKazvHWJYAR79tooln694rxKBDKDNEdbAPo7csBIw/j0wdCB0iDGNTVtxYivf76kj1+Q==} engines: {node: '>=16.0.0'} peerDependencies: @@ -3790,7 +3833,7 @@ packages: react-refresh: 0.11.0 semver: 7.3.8 typescript: 4.7.4 - webpack: 5.75.0 + webpack: 5.75.0(esbuild@0.17.19) transitivePeerDependencies: - '@swc/core' - '@types/webpack' @@ -3844,7 +3887,7 @@ packages: react-docgen-typescript: 2.2.2(typescript@4.7.4) tslib: 2.5.0 typescript: 4.7.4 - webpack: 5.75.0 + webpack: 5.75.0(esbuild@0.17.19) transitivePeerDependencies: - supports-color dev: true @@ -4088,6 +4131,10 @@ packages: '@types/node': 18.14.2 dev: true + /@types/gtag.js@0.0.12: + resolution: {integrity: sha512-YQV9bUsemkzG81Ea295/nF/5GijnD2Af7QhEofh7xu+kvCN6RdodgNwwGWXB5GMI3NoyvQo0odNctoH/qLMIpg==} + dev: true + /@types/hast@2.3.4: resolution: {integrity: sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==} dependencies: @@ -4612,8 +4659,10 @@ packages: indent-string: 4.0.0 dev: true - /ajv-formats@2.1.1: + /ajv-formats@2.1.1(ajv@8.12.0): resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==} + peerDependencies: + ajv: ^8.0.0 peerDependenciesMeta: ajv: optional: true @@ -4859,7 +4908,7 @@ packages: '@babel/core': 7.21.0 dev: true - /babel-loader@8.3.0(@babel/core@7.21.0): + /babel-loader@8.3.0(@babel/core@7.21.0)(webpack@5.75.0): resolution: {integrity: sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==} engines: {node: '>= 8.9'} peerDependencies: @@ -4871,6 +4920,7 @@ packages: loader-utils: 2.0.4 make-dir: 3.1.0 schema-utils: 2.7.1 + webpack: 5.75.0(esbuild@0.17.19) dev: true /babel-loader@9.1.2(@babel/core@7.21.0)(webpack@5.75.0): @@ -4883,7 +4933,7 @@ packages: '@babel/core': 7.21.0 find-cache-dir: 3.3.2 schema-utils: 4.0.0 - webpack: 5.75.0 + webpack: 5.75.0(esbuild@0.17.19) dev: true /babel-plugin-add-react-displayname@0.0.5: @@ -5654,22 +5704,6 @@ packages: engines: {node: '>=8'} dev: true - /css-loader@6.7.3: - resolution: {integrity: sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==} - engines: {node: '>= 12.13.0'} - peerDependencies: - webpack: ^5.0.0 - dependencies: - icss-utils: 5.1.0(postcss@8.4.21) - postcss: 8.4.21 - postcss-modules-extract-imports: 3.0.0(postcss@8.4.21) - postcss-modules-local-by-default: 4.0.0(postcss@8.4.21) - postcss-modules-scope: 3.0.0(postcss@8.4.21) - postcss-modules-values: 4.0.0(postcss@8.4.21) - postcss-value-parser: 4.2.0 - semver: 7.3.8 - dev: true - /css-loader@6.7.3(webpack@5.75.0): resolution: {integrity: sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==} engines: {node: '>= 12.13.0'} @@ -5684,7 +5718,7 @@ packages: postcss-modules-values: 4.0.0(postcss@8.4.21) postcss-value-parser: 4.2.0 semver: 7.3.8 - webpack: 5.75.0 + webpack: 5.75.0(esbuild@0.17.19) dev: true /css-select@4.3.0: @@ -6742,7 +6776,7 @@ packages: dependencies: flat-cache: 3.0.4 - /file-loader@6.2.0: + /file-loader@6.2.0(webpack@5.75.0): resolution: {integrity: sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -6750,6 +6784,7 @@ packages: dependencies: loader-utils: 2.0.4 schema-utils: 3.1.1 + webpack: 5.75.0(esbuild@0.17.19) dev: true /file-system-cache@2.0.2: @@ -6899,7 +6934,7 @@ packages: semver: 7.3.8 tapable: 2.2.1 typescript: 4.7.4 - webpack: 5.75.0 + webpack: 5.75.0(esbuild@0.17.19) dev: true /form-data@3.0.1: @@ -7366,7 +7401,7 @@ packages: lodash: 4.17.21 pretty-error: 4.0.0 tapable: 2.2.1 - webpack: 5.75.0 + webpack: 5.75.0(esbuild@0.17.19) dev: true /htmlparser2@6.1.0: @@ -8816,7 +8851,7 @@ packages: resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==} dev: true - /node-polyfill-webpack-plugin@2.0.1: + /node-polyfill-webpack-plugin@2.0.1(webpack@5.75.0): resolution: {integrity: sha512-ZUMiCnZkP1LF0Th2caY6J/eKKoA0TefpoVa68m/LQU1I/mE8rGt4fNYGgNuCcK+aG8P8P43nbeJ2RqJMOL/Y1A==} engines: {node: '>=12'} peerDependencies: @@ -8847,6 +8882,7 @@ packages: url: 0.11.1 util: 0.12.5 vm-browserify: 1.1.2 + webpack: 5.75.0(esbuild@0.17.19) dev: true /node-releases@2.0.10: @@ -9279,7 +9315,7 @@ packages: '@babel/runtime': 7.21.0 dev: true - /postcss-loader@7.0.2(postcss@8.4.21): + /postcss-loader@7.0.2(postcss@8.4.21)(webpack@5.75.0): resolution: {integrity: sha512-fUJzV/QH7NXUAqV8dWJ9Lg4aTkDCezpTS5HgJ2DvqznexTbSTxgi/dTECvTZ15BwKTtk8G/bqI/QTu2HPd3ZCg==} engines: {node: '>= 14.15.0'} peerDependencies: @@ -9290,6 +9326,7 @@ packages: klona: 2.0.6 postcss: 8.4.21 semver: 7.3.8 + webpack: 5.75.0(esbuild@0.17.19) dev: true /postcss-modules-extract-imports@3.0.0(postcss@8.4.21): @@ -9734,7 +9771,7 @@ packages: react-dom: optional: true dependencies: - '@react-three/fiber': 8.13.4(react-dom@18.2.0)(react@18.2.0)(three@0.153.0) + '@react-three/fiber': 8.13.5(react-dom@18.2.0)(react@18.2.0)(three@0.153.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) three: 0.153.0 @@ -10116,7 +10153,7 @@ packages: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} dev: true - /sass-loader@12.6.0: + /sass-loader@12.6.0(webpack@5.75.0): resolution: {integrity: sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==} engines: {node: '>= 12.13.0'} peerDependencies: @@ -10137,6 +10174,7 @@ packages: dependencies: klona: 2.0.6 neo-async: 2.6.2 + webpack: 5.75.0(esbuild@0.17.19) dev: true /scheduler@0.21.0: @@ -10174,7 +10212,7 @@ packages: dependencies: '@types/json-schema': 7.0.11 ajv: 8.12.0 - ajv-formats: 2.1.1 + ajv-formats: 2.1.1(ajv@8.12.0) ajv-keywords: 5.1.0(ajv@8.12.0) dev: true @@ -10540,20 +10578,13 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} - /style-loader@3.3.1: - resolution: {integrity: sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==} - engines: {node: '>= 12.13.0'} - peerDependencies: - webpack: ^5.0.0 - dev: true - /style-loader@3.3.1(webpack@5.75.0): resolution: {integrity: sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==} engines: {node: '>= 12.13.0'} peerDependencies: webpack: ^5.0.0 dependencies: - webpack: 5.75.0 + webpack: 5.75.0(esbuild@0.17.19) dev: true /style-to-object@0.4.1: @@ -10708,7 +10739,7 @@ packages: unique-string: 2.0.0 dev: true - /terser-webpack-plugin@5.3.6(webpack@5.75.0): + /terser-webpack-plugin@5.3.6(esbuild@0.17.19)(webpack@5.75.0): resolution: {integrity: sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -10725,11 +10756,12 @@ packages: optional: true dependencies: '@jridgewell/trace-mapping': 0.3.17 + esbuild: 0.17.19 jest-worker: 27.5.1 schema-utils: 3.1.1 serialize-javascript: 6.0.1 terser: 5.16.5 - webpack: 5.75.0 + webpack: 5.75.0(esbuild@0.17.19) dev: true /terser@5.16.5: @@ -11321,7 +11353,7 @@ packages: mime-types: 2.1.35 range-parser: 1.2.1 schema-utils: 4.0.0 - webpack: 5.75.0 + webpack: 5.75.0(esbuild@0.17.19) dev: true /webpack-hot-middleware@2.25.3: @@ -11341,7 +11373,7 @@ packages: resolution: {integrity: sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA==} dev: true - /webpack@5.75.0: + /webpack@5.75.0(esbuild@0.17.19): resolution: {integrity: sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==} engines: {node: '>=10.13.0'} hasBin: true @@ -11372,7 +11404,7 @@ packages: neo-async: 2.6.2 schema-utils: 3.1.1 tapable: 2.2.1 - terser-webpack-plugin: 5.3.6(webpack@5.75.0) + terser-webpack-plugin: 5.3.6(esbuild@0.17.19)(webpack@5.75.0) watchpack: 2.4.0 webpack-sources: 3.2.3 transitivePeerDependencies: diff --git a/src/components/Common/others/CastomHead.tsx b/src/components/Common/others/CastomHead.tsx new file mode 100644 index 0000000..79e41b3 --- /dev/null +++ b/src/components/Common/others/CastomHead.tsx @@ -0,0 +1,267 @@ +import React from "react"; +import { useRouter } from "next/router"; +import Head from "next/head"; + +export const CostomHead = () => { + const router = useRouter(); + const BaseMeta = () => ( + <> + C3 OpenCampus2023 + + + + + + + + + + ); + switch (router.pathname) { + case "/": + return ( + + + + + + + + + + ); + case "/map": + return ( + + + + + + + + + + ); + case "/web": + return ( + + + + + + + + + + ); + case "/web/artifact": + return ( + + + + + + + + + + + ); + case "/web/artifact/[category]": + case "/web/artifact/[category]/[artifactId]": + switch (router.query.category) { + case "hack": + return ( + + + + + + + + + + ); + case "game": + return ( + + + + + + + + + + ); + case "cg3d": + return ( + + + + + + + + + + ); + case "cg2d": + return ( + + + + + + + + + + ); + case "music": + return ( + + + + + + + + + + ); + default: + return ( + + + + ); + } + default: + return ( + + + + ); + } +}; diff --git a/src/components/Common/others/Gtag.tsx b/src/components/Common/others/Gtag.tsx new file mode 100644 index 0000000..d69f29f --- /dev/null +++ b/src/components/Common/others/Gtag.tsx @@ -0,0 +1,39 @@ +import Script from "next/script"; +import { useRouter } from "next/router"; +import { useEffect } from "react"; + +export const Gtag = () => { + const router = useRouter(); + useEffect(() => { + const handleRouterChange = (url: any) => { + window.gtag("config", process.env.NEXT_PUBLIC_GA_ID ?? "", { + page_path: url, + }); + }; + router.events.on("routeChangeComplete", handleRouterChange); + return () => { + router.events.off("routeChangeComplete", handleRouterChange); + }; + }, [router.events]); + return ( + <> +