Upgrade to Next 13 (#902)

pynecone/.templates/web/package.json

@@ -6,33 +6,30 @@
     "prod": "next start"
   },
   "dependencies": {
-    "@chakra-ui/icons": "1.1.7",
-    "@chakra-ui/react": "1.8.8",
-    "@chakra-ui/system": "1.12.1",
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "axios": "^0.27.2",
+    "@chakra-ui/icons": "^2.0.19",
+    "@chakra-ui/react": "^2.6.0",
+    "@chakra-ui/system": "^2.5.6",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "axios": "^1.4.0",
     "focus-visible": "^5.2.0",
-    "framer-motion": "^6.3.3",
-    "gridjs": "^4.0.0",
-    "gridjs-react": "^4.0.0",
-    "next": "^12.1.0",
-    "next-sitemap": "^3.1.52",
-    "plotly.js": "2.6.4",
-    "prettier": "^2.8.1",
-    "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^17.0.2",
+    "framer-motion": "^10.12.4",
+    "gridjs": "^6.0.6",
+    "gridjs-react": "^6.0.1",
+    "json5": "^2.2.3",
+    "next": "^13.3.1",
+    "plotly.js": "^2.22.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-markdown": "^8.0.3",
+    "react-markdown": "^8.0.7",
     "react-plotly.js": "^2.6.0",
     "react-syntax-highlighter": "^15.5.0",
-    "rehype-katex": "^6.0.2",
+    "rehype-katex": "^6.0.3",
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "socket.io-client": "^4.5.4",
-    "victory": "^36.6.8",
-    "json5": "^2.2.3"
+    "socket.io-client": "^4.6.1",
+    "victory": "^36.6.8"
   }
 }

pynecone/components/component.py

@@ -317,6 +317,8 @@ class Component(Base, ABC):
         # Special case for props named `type_`.
         if hasattr(self, "type_"):
             props["type"] = self.type_  # type: ignore
+        if hasattr(self, "as_"):
+            props["as"] = self.as_  # type: ignore
 
         return tag.add_props(**props)
 

pynecone/components/navigation/link.py

@@ -20,6 +20,9 @@ class Link(ChakraComponent):
     # The text to display.
     text: Var[str]
 
+    # What the link renders too.
+    as_: Var[str] = "span"  # type: ignore
+
     # If true, the link will open in new tab.
     is_external: Var[bool]