Initial Commit - NextJS, Typescript, GraphQL, TailwindCSS

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -8,8 +8,19 @@
     "start": "next start"
   },
   "dependencies": {
+    "apollo-server-micro": "^2.19.0",
+    "graphql": "^15.4.0",
     "next": "10.0.2",
     "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "react-dom": "17.0.1",
+    "swr": "^0.3.9"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.9",
+    "@types/react": "^16.9.56",
+    "postcss": "^8.1.8",
+    "postcss-preset-env": "^6.7.0",
+    "tailwindcss": "^2.0.1",
+    "typescript": "^4.1.2"
   }
 }

pages/_app.js

@@ -1,5 +1,7 @@
+import "../styles/tailwind.css";
 import '../styles/globals.css'
 
+
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }

pages/api/graphql.ts

@@ -0,0 +1,28 @@
+import { ApolloServer, gql } from 'apollo-server-micro'
+
+const typeDefs = gql`
+  type Query {
+    users: [User!]!
+  }
+  type User {
+    name: String
+  }
+`
+
+const resolvers = {
+  Query: {
+    users(parent, args, context) {
+      return [{ name: 'Nextjs' }]
+    },
+  },
+}
+
+const apolloServer = new ApolloServer({ typeDefs, resolvers })
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+}
+
+export default apolloServer.createHandler({ path: '/api/graphql' })

pages/api/hello.js → pages/api/hello.ts

@@ -1,6 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
 
-export default (req, res) => {
+export default (req: NextApiRequest, res: NextApiResponse) => {
   res.statusCode = 200
   res.json({ name: 'John Doe' })
 }

pages/index.tsx

@@ -0,0 +1,29 @@
+import useSWR from 'swr'
+
+const fetcher = (query) =>
+  fetch('/api/graphql', {
+    method: 'POST',
+    headers: {
+      'Content-type': 'application/json',
+    },
+    body: JSON.stringify({ query }),
+  })
+    .then((res) => res.json())
+    .then((json) => json.data)
+
+export default function Index() {
+  const { data, error } = useSWR('{ users { name } }', fetcher)
+
+  if (error) return <div>Failed to load</div>
+  if (!data) return <div>Loading...</div>
+
+  const { users } = data
+
+  return (
+    <div>
+      {users.map((user, i) => (
+        <div key={i}>{user.name}</div>
+      ))}
+    </div>
+  )
+}

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ["tailwindcss", "postcss-preset-env"],
+};

styles/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,39 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    colors: {
+      primary: "#6B9080",
+      primary1: "#6B9080",
+      secondary: "#D68C45",
+      secondary2: "#D68C45",
+      accent: "#FEFEE3",
+      light: "#F6FFF8",
+      dark: "#122B1D",
+      white1: "#fff",
+      gray: {
+        100: "#f5f5f5",
+        200: "#eeeeee",
+        300: "#e0e0e0",
+        400: "#bdbdbd",
+        500: "#9e9e9e",
+        600: "#757575",
+        700: "#616161",
+        800: "#424242",
+        900: "#212121",
+      },
+    },
+    extend: {},
+  },
+  variants: {
+    cursor: ["responsive", "hover", "focus"],
+    borderColor: ["responsive", "hover", "focus", "focus-within"],
+    borderWidth: ["responsive", "hover", "focus", "focus-within"],
+    backgroundColor: ["hover", "focus", "active", "focus-within"],
+    textColor: ["responsive", "hover", "focus", "active", "group-focus"],
+    fontSize: ["responsive", "hover", "focus", "active", "group-focus"],
+    borderStyle: ["responsive", "hover", "focus", "active", "group-focus"],
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx", "pages/index.js", "pages/_app.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}