update example

Author: codeBelt

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+tab_width = 2
+indent_size = 2
+charset = utf-8
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[Makefile]
+indent_style = tab

.prettierignore

@@ -0,0 +1,21 @@
+*.d.ts
+.DS_Store
+.editorconfig
+.git
+.github
+.gitignore
+.idea/*
+.jest-cache
+.jest-coverage
+.next
+.npmrc
+.nvmrc
+.out
+.prettierignore
+.vscode/*
+build
+dist
+lib
+node_modules
+package.json
+out

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "arrowParens": "always",
+  "jsxSingleQuote": false,
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

.yarnrc

@@ -0,0 +1 @@
+save-prefix ""

README.md

@@ -1,4 +1,5 @@
 # my-next.js-starter
+
 `npx create-next-app --example with-typescript my-next.js-starter`
 
 # TypeScript Next.js example

components/List.tsx

@@ -1,21 +1,37 @@
 {
-  "name": "with-typescript",
+  "name": "my-next.js-starter",
   "version": "1.0.0",
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged",
+      "post-commit": "git update-index -g"
+    }
+  },
   "scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "type-check": "tsc"
+    "---------- Linting ----------------------------------------------------": "",
+    "prettier": "npx prettier --write \"./**/*.{ts,tsx,js,jsx,json,md}\"",
+    "---------- helper commands --------------------------------------------": "",
+    "serve": "http-server ./out",
+    "ts": "tsc --noEmit",
+    "ts:watch": "npm run ts -- --watch",
+    "-----------------------------------------------------------------------": ""
   },
   "dependencies": {
-    "next": "latest",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "next": "10.0.2",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
   },
   "devDependencies": {
-    "@types/node": "^14.14.9",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/node": "14.14.9",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
+    "http-server": "0.12.3",
+    "husky": "4.3.0",
+    "prettier": "2.1.2",
+    "pretty-quick": "3.1.0",
     "typescript": "4.1.2"
   },
   "license": "MIT"

components/ListDetail.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ListItem } from './ListItem';
+import { IUser } from '../domains/users/users.constants';
+
+interface IProps {
+  users: IUser[];
+}
+
+export const List: React.FC<IProps> = (props) => (
+  <ul>
+    {props.users.map((user) => (
+      <li key={user.id}>
+        <ListItem user={user} />
+      </li>
+    ))}
+  </ul>
+);

components/ListItem.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IUser } from '../domains/users/users.constants';
+
+interface IProps {
+  user: IUser;
+}
+
+export const ListDetail: React.FC<IProps> = (props) => (
+  <div>
+    <h1>Detail for {props.user.name}</h1>
+    <p>ID: {props.user.id}</p>
+  </div>
+);

interfaces/index.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import Link from 'next/link';
+import { IUser } from '../domains/users/users.constants';
+
+interface IProps {
+  user: IUser;
+}
+
+export const ListItem: React.FC<IProps> = (props) => (
+  <Link href={`/users/${props.user.id}`}>
+    <a>
+      {props.user.id}: {props.user.name}
+    </a>
+  </Link>
+);

package.json

@@ -0,0 +1,16 @@
+import React from 'react';
+import Link from 'next/link';
+
+interface IProps {}
+
+export const AboutPage: React.FC<IProps> = (props) => (
+  <div>
+    <h1>About</h1>
+    <p>This is the about page</p>
+    <p>
+      <Link href="/">
+        <a>Go home</a>
+      </Link>
+    </p>
+  </div>
+);

pages/about.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Link from 'next/link';
+import { Routes } from '../../constants/Routes';
+
+interface IProps {}
+
+export const IndexPage: React.FC<IProps> = (props) => (
+  <div>
+    <h1>Hello Next.js 👋</h1>
+    <p>
+      <Link href={Routes.About}>
+        <a>About</a>
+      </Link>
+    </p>
+  </div>
+);