ormacarbon · ViniciusDuarte17 · Jan 19, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,9 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "13.0.6",
+    "axios": "^1.2.3",
+    "next": "^13.1.2",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
     "eslint": "8.29.0",

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,6 +1,11 @@
+import GlobalStyle from "../styles/globalStyled"
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (<>
+    <Component {...pageProps} />
+    <GlobalStyle />
+  </>
+  )
 }
 
 export default MyApp
diff --git a/pages/_document.jsx b/pages/_document.jsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript
+} from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(
+    ctx
+  ) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        )
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+
+  render(){
+    return (
+      <Html lang="pt">
+        <Head>
+          <meta charSet="utf-8" />
+
+          <link
+            href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"
+            rel="stylesheet"
+          />
+
+          <link rel="icon" href="https://rocketseat.com.br/favicon.ico" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/pages/index.js b/pages/index.js
@@ -2,7 +2,7 @@
 export default function Home() {
   return (
     <div>
-      <h1>Hello, World!</h1>
+      <h1>Tela de todos pokemon!</h1>
     </div>
   )
-}
+} 
diff --git a/pages/pokedex/index.jsx b/pages/pokedex/index.jsx
@@ -0,0 +1,10 @@
+
+
+export default function Pokedex  ()  {
+
+    return(
+        <div>
+            <h1>estamos na tela da pokedex</h1>
+        </div>
+    )
+}
diff --git a/pages/pokedex/styled.js b/pages/pokedex/styled.js
diff --git a/services/requestPokemon.js b/services/requestPokemon.js
@@ -0,0 +1,8 @@
+import axios from "axios"
+
+
+
+export const requestPokemon = () => {
+    axios
+    .get()
+}
diff --git a/styles/globalStyled.js b/styles/globalStyled.js
@@ -0,0 +1,14 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+ * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color: #222;
+    color: #fff;
+    font-family: Open-Sans, Helvetica, Sans-Serif;
+  }
+`;
+
+export default GlobalStyle;