Add default CSS modules solution

Author: andreipfeiffer

README.md

@@ -1,34 +1,9 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org/) project.
 
 ## Getting Started
 
 First, run the development server:
 
 ```bash
-npm run dev
-# or
 yarn dev
 ```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/button.module.css

@@ -0,0 +1,41 @@
+.button {
+  color: dodgerblue;
+  border: 0;
+  height: 3em;
+  padding: 0 2em;
+  border-radius: 1.5em;
+  cursor: pointer;
+  font-weight: bold;
+  width: 100vw;
+  display: block;
+  outline: 0;
+  background-color: currentColor;
+  margin: 1em auto;
+}
+
+.button span {
+  color: white;
+}
+
+.button:hover {
+  animation-name: button-animation;
+  animation-fill-mode: forwards;
+  animation-duration: 0.5s;
+}
+
+@media only screen and (min-width: 640px) {
+  .button {
+    width: 100%;
+  }
+}
+
+@keyframes button-animation {
+  from {
+    transform: translateY(0);
+    box-shadow: none;
+  }
+  to {
+    transform: translateY(-0.5em);
+    box-shadow: 0 0.5em 0 0 #ddd;
+  }
+}

components/button.tsx

@@ -0,0 +1,16 @@
+import styles from "./button.module.css";
+
+type Props = {
+  children: string;
+  color?: string;
+};
+
+export function Button(props: Props) {
+  const { children, color = "dodgerblue" } = props;
+
+  return (
+    <button className={styles.button} style={{ color }}>
+      <span>{children}</span>
+    </button>
+  );
+}

next-env.d.ts

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

package.json

@@ -11,5 +11,10 @@
     "next": "10.0.5",
     "react": "17.0.1",
     "react-dom": "17.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.20",
+    "@types/react": "^17.0.0",
+    "typescript": "^4.1.3"
   }
 }

pages/_app.js

@@ -0,0 +1,9 @@
+import type { AppProps /*, AppContext */ } from "next/app";
+
+import "../styles/globals.css";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

pages/_app.tsx

@@ -0,0 +1,11 @@
+import { Button } from "../components/button";
+
+export default function Home() {
+  return (
+    <main>
+      <Button>Default color</Button>
+      <Button color="#e3b307">Yellow color</Button>
+      <Button color="#57b004">Green color</Button>
+    </main>
+  );
+}

pages/api/hello.js

@@ -2,8 +2,19 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+html,
+body,
+button,
+input {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
 a {

pages/index.js

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