Skip to content

Latest commit

 

History

History
74 lines (65 loc) · 1.84 KB

README.md

File metadata and controls

74 lines (65 loc) · 1.84 KB
Raw

Personal Portfolio

image This Portfolio showcase my project done and some contact links. This is built with Vercel, React and NextJS and styled components.

Current Environment

  1. Nodejs 16.19.0 -> 18.12.1 (LTS)
  2. NextJS 12 -> 13
  3. React 17.0.2 -> 18.2.0
  4. eslint-config-next 13.1.1
  5. SWR 2.0.0

Changelog

Changes from NextJS 12 to NextJS 13

  1. Nodejs 16.19.0 -> 18.12.1 (LTS)
  2. NextJS 12 -> 13
  3. React 17.0.2 -> 18.2.0
  4. eslint-config-next 13.1.1
  5. SWR 2.0.0

<Link> Component Breaking Change

The Component no longer requires manually adding an <a> tag as a child.
This behavior was added as an experimental option in version 12.2 and is now the default.
In Next.js 13, <Link> always renders <a> and allows you to forward props to the underlying tag.

For example:

import Link from 'next/link'

// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` always renders `<a>` under the hood
<Link href="/about">
  About
</Link>

To upgrade your links to Next.js 13, you can use the new-link codemod.

Changes from NextJS 11 to NextJS 12

  1. Nodejs 16.19.2
  2. NextJS 11 -> 12
  3. React Version 17.0.2

Breaking Changes: .babelrc to next.config.mjs

From .babelrc

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

To next.config.mjs

/**
 * @type {import('next').NextConfig}
 */

const nextConfig = {
  compiler:{
    styledComponents:{
      ssr:true
    }
  },
  swcMinify: true
  /* config options here */
}

export default nextConfig;

Changes from NextJS 10 to NextJS 11

  1. Nodejs 16.19.2
  2. NextJS 10 -> 11
  3. React Version 17.0.2