convert example to next 12

packages/starter/example/.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo

packages/starter/example/README.md

@@ -6,20 +6,12 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, install the dependencies:
+First, run the development server:
 
 ```bash
-yarn install
+npm run dev
 # or
-npm install
-```
-
-Then run the development server:
-
-```bash
 yarn dev
-# or
-npm run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

packages/starter/example/next.config.js

@@ -1,13 +1,11 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const plugins = require('next-compose-plugins');
 const antdLess = require('next-plugin-antd-less');
-const transpileModules = require('next-transpile-modules');
 const { PHASE_PRODUCTION_BUILD } = require('next/constants');
 
 module.exports = function (phase, ...args) {
     return plugins(
         [
-            [transpileModules, ['@blocto/sdk', '@project-serum/sol-wallet-adapter']],
             [
                 antdLess,
                 {

packages/starter/example/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@solana/wallet-adapter-example",
-    "version": "0.17.2",
+    "version": "0.18.0",
     "author": "Solana Maintainers <maintainers@solana.foundation>",
     "repository": "https://github.com/solana-labs/wallet-adapter",
     "license": "Apache-2.0",
@@ -40,20 +40,20 @@
         "@solana/web3.js": "^1.20.0",
         "antd": "~4.16.13",
         "bs58": "^4.0.0",
-        "next": "^11.0.0",
+        "next": "12.0.7",
         "notistack": "^2.0.0",
-        "react": "^17.0.0",
-        "react-dom": "^17.0.0",
+        "react": "17.0.2",
+        "react-dom": "17.0.2",
         "tweetnacl": "^1.0.0"
     },
     "devDependencies": {
+        "@types/node": "17.0.8",
         "@types/react": "^17.0.0",
         "babel-plugin-import": "^1.13.3",
-        "eslint": "^7.32.0",
-        "eslint-config-next": "^11.0.0",
+        "eslint": "8.6.0",
+        "eslint-config-next": "12.0.7",
         "next-compose-plugins": "^2.2.1",
-        "next-plugin-antd-less": "^1.4.3",
-        "next-transpile-modules": "^8.0.0",
+        "next-plugin-antd-less": "^1.8.0",
         "shx": "^0.3.3",
         "typescript": "~4.4.4"
     }

packages/starter/example/pages/_app.tsx

@@ -1,21 +1,14 @@
 import { AppProps } from 'next/app';
-import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
+import { ContextProvider } from '../components/ContextProvider';
 
-// Use require instead of import, and order matters
+// Use require instead of import since order matters
 require('antd/dist/antd.dark.less');
 require('@solana/wallet-adapter-ant-design/styles.css');
 require('@solana/wallet-adapter-react-ui/styles.css');
 require('../styles/globals.css');
 
-const ContextProvider = dynamic<{ children: ReactNode }>(
-    () => import('../components/ContextProvider').then(({ ContextProvider }) => ContextProvider),
-    {
-        ssr: false,
-    }
-);
-
 const App: FC<AppProps> = ({ Component, pageProps }) => {
     return (
         <>

packages/starter/example/tsconfig.json

@@ -14,6 +14,7 @@
         "moduleResolution": "node",
         "resolveJsonModule": true,
         "isolatedModules": true,
-        "jsx": "preserve"
+        "jsx": "preserve",
+        "incremental": true
     }
 }