Upgrade site Next.js version with Babel and TypeScript

[rafaell-lycan]

Checklist

• Fix linting errors
• Tests have been added / updated (or snapshots)

Change information

Update the Next.js version from 12.0.9-canary.0 to 12.3.4 and also some small changes on the following packages:

• @babel/* is now using 7.23.x with exception of @babel/preset-react (7.22.15);
• @mapbox/rehype-prism is now using 0.8.0 which also update its dependencies;
• @next/mdx is now using the latest 12.x version compatible with Next.js v12;
• typescript is now using the latest v4 version which requires upgrading ttypescript;
• extract-mdx-metadata is now using v2 which brings a series of security fixes;
• fs-extra is now using v11 which drops Node.js v12 and brings better compatibility with TS;
• @types/react-* is now using the latest version under v17;

NOTE: During the TypeScript upgrade, some types have gotten errors and were updated.

[netlify]

❌ Deploy Preview for geist-ui failed.

Name	Link
🔨 Latest commit	fd75933
🔍 Latest deploy log	https://app.netlify.com/sites/geist-ui/deploys/653ee3c3a18a780008081961

[rafaell-lycan]

Hi y'all 👋

First of all, this is a draft, and the goal here is just to share an issue I've found before splitting it into smaller commits.

---

I've found 2 TS issues when generating types with ttypescript and I couldn't fix these for now.

• components/select/select.tsx:174 Argument of type '{ preventAllEvents: boolean; }' is not assignable to parameter of type 'Partial & Attributes';
• components/shared/css-transition.tsx:69 Argument of type '{ className: string; }' is not assignable to parameter of type 'Partial & Attributes';

For the first issue I have no clue on how to bypass that TS error without adding a @ts-ignore or something similar, but I wanna see if anyone has a better approach.

The second issue can be fixed by simply wrapping it onto an object and spreading it after props, but I haven't included on this PR yet because I want to see if anyone can bring a better alternative.

return React.cloneElement(children, {
    ...props,
    ...{ className: `${children.props.className} ${className} ${classes}` },
  })