chore: upgrade all dependencies. especially, next.js to 13

de7cfd02 · Moorthy G · e9d25df8 · de7cfd02 · de7cfd02 · de7cfd02
Commit de7cfd02 authored Dec 07, 2022 by Moorthy G
11 changed files
--- a/app/[slug]/page.js
+++ b/app/[slug]/page.js
+import { notFound } from 'next/navigation';
+import Button from '@components/button';
+
+export default function Page({ params }) {
+  if (params.slug !== 'home') {
+    notFound();
+  }
+
+  return (
+    <div className="container">
+      <center style={{ padding: '2em' }}>
+        <img src={'/img/nextjs.png'} width="200" height="120" alt="" />
+        <h3 style={{ fontWeight: 'normal' }}>Welcome to Next.js App</h3>
+        <Button size="small" href="/another">
+          View another page
+        </Button>
+      </center>
+    </div>
+  );
+}
--- a/app/another/head.js
+++ b/app/another/head.js
+export default function Head() {
+  return <title>Another Page Title</title>;
+}
--- a/app/another/page.js
+++ b/app/another/page.js
+import Button from '@components/button';
+
+const AnotherPage = () => {
+  return (
+    <div className="container">
+      <center style={{ padding: '2em' }}>
+        <h3 style={{ fontWeight: 'normal' }}>You're landed on another page</h3>
+        <Button size="small" href="/">
+          View home page
+        </Button>
+      </center>
+    </div>
+  );
+};
+
+export default AnotherPage;
--- a/app/head.js
+++ b/app/head.js
+export default function Head() {
+  return <title>Welcome to next.js app</title>;
+}
--- a/app/layout.js
+++ b/app/layout.js
+import '@styles/global.scss';
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <head>
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <link rel="icon" href="/favicon.ico" />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
--- a/app/not-found.js
+++ b/app/not-found.js
+import PageNotFound from '@components/page-not-found';
+
+export default PageNotFound;
--- a/components/page-not-found/index.js
+++ b/components/page-not-found/index.js
-import React from 'react';
+import Image from 'next/image';
 import Button from '@components/button';
+import FourOhFour from './img/404.png';
 import styles from './styles.module.scss';

 export default function PageNotFound() {
  return (
    <div className={styles.notFound}>
-      <img src={require('./img/404.png')} alt="" />
+      <Image src={FourOhFour} alt="404, Page Not Found!" />
      <Button href="/">Back to Home</Button>
    </div>
  );

--- a/next.config.js
+++ b/next.config.js
 module.exports = {
+  experimental: { appDir: true },
+  images: {
+    domains: [''],
+    deviceSizes: [128, 384],
+    imageSizes: [640, 828, 1200, 1600, 1920, 2048]
+  },
  webpack: (config, { isServer }) => {
    if (process.env.ANALYZE && !isServer) {
      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
@@ -10,20 +16,8 @@ module.exports = {
        })
      );
    }
-    config.module.rules.push({
-      test: /\.(png|svg|jpg|jpeg|gif|mp3|mp4)$/i,
-      // Next.js already handles url() in css/sass/scss files
-      issuer: /\.\w+(?<!(s?c|sa)ss)$/i,
-      type: 'asset/resource',
-      generator: {
-        filename: 'static/media/[name]-[hash:8][ext]'
-      }
-    });
    return config;
  },
-  images: {
-    disableStaticImages: true
-  },
  async rewrites() {
    return [
      {

--- a/package.json
+++ b/package.json
@@ -12,33 +12,32 @@
  },
  "dependencies": {
    "classnames": "^2.3.2",
-    "css-loader": "^6.7.1",
-    "next": "13.0.0",
+    "css-loader": "^6.7.2",
+    "next": "^13.0.6",
    "next-images": "^1.8.4",
    "normalize.css": "^8.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.1.0",
-    "sharp": "^0.31.1",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
+    "sharp": "^0.31.2",
    "style-loader": "^3.3.1"
  },
  "devDependencies": {
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addon-links": "^6.5.14",
+    "@storybook/builder-webpack5": "^6.5.14",
+    "@storybook/manager-webpack5": "^6.5.14",
    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.13",
-    "babel-loader": "^8.2.5",
+    "@storybook/react": "^6.5.14",
+    "babel-loader": "^9.1.0",
    "cross-env": "^7.0.3",
    "cz-conventional-changelog": "^3.3.0",
-    "husky": "^8.0.1",
-    "prettier": "^2.7.1",
+    "husky": "^8.0.2",
+    "prettier": "^2.8.0",
    "pretty-quick": "^3.1.3",
-    "webpack-bundle-analyzer": "^4.7.0",
-    "yarn": "^1.22.19"
+    "webpack-bundle-analyzer": "^4.7.0"
  }
 }
--- a/pages/index.js
+++ b/pages/index.js
-import Head from 'next/head';
-import Image from 'next/image';
-
-export default function Home() {
-  return (
-    <div className="container">
-      <Head>
-        <title>Create Next App</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <center style={{ padding: '2em' }}>
-        <Image
-          src={require('../public/img/nextjs.png')}
-          width="200"
-          height="120"
-          alt=""
-        />
-        <h3 style={{ fontWeight: 'normal' }}>Welcome to Next.js App</h3>
-      </center>
-    </div>
-  );
-}
--- a/yarn.lock
+++ b/yarn.lock