init

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "style": "css"
+      }
+    ]
+  ]
+}

.editorconfig

@@ -0,0 +1,11 @@
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+tab_width = 2
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:prettier/recommended",
+    "prettier/@typescript-eslint"
+  ],
+  "plugins": ["@typescript-eslint", "react", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "env": { "browser": true, "node": true, "es6": true },
+  "parserOptions": {
+    "tsconfigRootDir": ".",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "react/jsx-uses-vars": 1,
+    "sort-imports": 1
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+.next/

.node-version

@@ -0,0 +1 @@
+12.7.0

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

Dockerfile

@@ -0,0 +1,6 @@
+FROM node:12
+RUN mkdir /app
+WORKDIR /app
+COPY package*.json ./
+RUN yarn install
+CMD yarn dev

README.md

@@ -1,2 +1,31 @@
 # nextjs-template
-nextjsを利用するときのテンプレートです
+
+This is template repository to use Nextjs and React.js.
+This repository uses libraries below.
+
+- Next.js
+- React.js
+  - Rreact Context API
+  - React Hooks
+- TypeScript
+- Ant Design
+- ESLint
+
+# Development
+
+Run below commands.
+This Docker image is able to use hot reload feature if you change some files.
+
+```
+docker build . -t next-template
+docker run -v $(pwd):/app -p 3000:3000 next-template
+```
+
+# Production
+
+Use Next.js production build.
+
+```
+NODE_ENV="production" yarn next build
+yarn next start
+```

api/confix.ts

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+const resolvedServer = (() => {
+  // at the build time, process.env.Server is replaced by value defiened in next.confi.js
+  // https://nextjs.org/docs/api-reference/next.config.js/environment-variables
+  if (process.env.Server) {
+    return process.env.Server;
+  }
+  return "http://localhost:3000";
+})();
+
+export const Axios = axios.create({
+  baseURL: resolvedServer,
+  timeout: 5000
+});

component/Counter.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { Button } from "antd";
+import { CounterContext } from "../context/counter";
+
+const styles = {
+  div: {
+    alignContent: "center"
+  }
+} as const;
+
+export const Counter = () => {
+  const { state, onClickIncrement, onClickDecrement } = React.useContext(
+    CounterContext
+  );
+  return (
+    <div style={styles.div}>
+      <h3>Counter</h3>
+      <p>
+        {state.count}
+        {state.unit}
+      </p>
+      <Button type="primary" onClick={onClickIncrement}>
+        increment
+      </Button>
+      <Button type="danger" onClick={onClickDecrement}>
+        decrement
+      </Button>
+    </div>
+  );
+};

context/counter/actionCreators.ts

@@ -0,0 +1,13 @@
+import * as types from "./actionTypes";
+
+export const increment = () => {
+  return { type: types.INCREMENT };
+};
+
+export const decrement = () => {
+  return { type: types.DECREMENT };
+};
+
+export const setCount = (amount: number) => {
+  return { type: types.SET_COUNT, payload: { amount } };
+};

context/counter/actionTypes.ts

@@ -0,0 +1,4 @@
+// Naming convention: <page name>_<action name>
+export const INCREMENT = "COUNTER_INCREMENT" as const;
+export const DECREMENT = "COUNTER_DECREMENT" as const;
+export const SET_COUNT = "COUNTER_SET_COUNT" as const;

context/counter/index.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { State, initialState, reducer } from "./reducer";
+import { decrement, increment } from "./actionCreators";
+
+type ContextType = {
+  onClickIncrement: () => void;
+  onClickDecrement: () => void;
+  state: State;
+};
+export const CounterContext = React.createContext<ContextType>(
+  {} as ContextType
+);
+
+export const CounterContextProvidor: React.FC = ({ children }) => {
+  const [state, dispatch] = React.useReducer(
+    reducer,
+    initialState({ count: 0 })
+  );
+  const onClickIncrement = () => {
+    dispatch(increment());
+  };
+  const onClickDecrement = () => {
+    dispatch(decrement());
+  };
+  return (
+    <CounterContext.Provider
+      value={{ onClickIncrement, onClickDecrement, state }}
+    >
+      {children}
+    </CounterContext.Provider>
+  );
+};

context/counter/reducer.ts

@@ -0,0 +1,33 @@
+import * as creators from "./actionCreators";
+import * as types from "./actionTypes";
+import { CreatorsToActions } from "../creatorToActions";
+
+export type State = {
+  count: number;
+  unit: string;
+};
+
+type Actions = CreatorsToActions<typeof creators>;
+
+const initialState = (injects?: Partial<State>): State => {
+  return {
+    count: 0,
+    unit: "pt",
+    ...injects
+  };
+};
+
+const reducer = (state: State, action: Actions) => {
+  switch (action.type) {
+    case types.INCREMENT:
+      return { ...state, count: state.count + 1 };
+    case types.DECREMENT:
+      return { ...state, count: state.count - 1 };
+    case types.SET_COUNT:
+      return { ...state, count: action.payload.amount };
+    default:
+      throw new Error("action type is not found: counter reducer");
+  }
+};
+
+export { reducer, initialState };

context/creatorToActions.ts

@@ -0,0 +1,8 @@
+type ReturnTypes<T> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [K in keyof T]: T[K] extends (...args: any[]) => any
+    ? ReturnType<T[K]>
+    : never;
+};
+type Unbox<T> = T extends { [K in keyof T]: infer U } ? U : never;
+export type CreatorsToActions<T> = Unbox<ReturnTypes<T>>;

context/index.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { CounterContextProvidor } from "./counter";
+
+export const ContextProvider: React.FC<React.Props<{}>> = ({ children }) => {
+  return <CounterContextProvidor>{children}</CounterContextProvidor>;
+};

hooks/input.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export const useFormInput = (initilaValue: string) => {
+  const [value, setValue] = React.useState(initilaValue);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  const handleReset = () => {
+    setValue("");
+  };
+
+  return {
+    value,
+    onChange: handleChange,
+    onReset: handleReset
+  };
+};

next-env.d.ts

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

next.config.js

@@ -0,0 +1,32 @@
+/* eslint-disable */
+const withCss = require("@zeit/next-css");
+
+const isProd = process.env.NODE_ENV === "production";
+module.exports = withCss({
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      const antStyles = /antd\/.*?\/style\/css.*?/;
+      const origExternals = [...config.externals];
+      config.externals = [
+        (context, request, callback) => {
+          if (request.match(antStyles)) return callback();
+          if (typeof origExternals[0] === "function") {
+            origExternals[0](context, request, callback);
+          } else {
+            callback();
+          }
+        },
+        ...(typeof origExternals[0] === "function" ? [] : origExternals)
+      ];
+
+      config.module.rules.unshift({
+        test: antStyles,
+        use: "null-loader"
+      });
+    }
+    return config;
+  },
+  env: {
+    server: isProd ? "https://production-server.com" : "http://localhost:3000"
+  }
+});

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "memo",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/hikaru7719/memo.git",
+  "author": "hikaru7719",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint -c .eslintrc.json pages/** --ext .js,.ts,.tsx"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.1",
+    "@types/node": "^12.7.5",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "@typescript-eslint/eslint-plugin": "^2.3.0",
+    "@typescript-eslint/parser": "^2.3.0",
+    "core-js": "3",
+    "eslint": "^6.4.0",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.16.0",
+    "nodemon": "^1.19.2",
+    "prettier": "^1.18.2",
+    "ts-node": "^8.4.1",
+    "typescript": "^3.6.3",
+    "webpack": "^4.41.1"
+  },
+  "dependencies": {
+    "@zeit/next-css": "^1.0.1",
+    "antd": "^3.23.6",
+    "axios": "^0.19.0",
+    "babel-plugin-import": "^1.12.2",
+    "express": "^4.17.1",
+    "next": "^9.0.6",
+    "null-loader": "^3.0.0",
+    "rc-tween-one": "^2.6.5",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  }
+}

pages/_app.js

@@ -0,0 +1,15 @@
+import App from "next/app";
+import { ContextProvider } from "../context";
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props;
+    return (
+      <ContextProvider>
+        <Component {...pageProps} />
+      </ContextProvider>
+    );
+  }
+}
+
+export default MyApp;

pages/counter.tsx

@@ -0,0 +1,10 @@
+import { Counter } from "../component/Counter";
+const CounterPage = () => {
+  return (
+    <>
+      <Counter />
+    </>
+  );
+};
+
+export default CounterPage;

pages/index.tsx

@@ -0,0 +1,7 @@
+import * as React from "react";
+
+const IndexPage: React.FC<{}> = () => {
+  return <div>NextTemplate</div>;
+};
+
+export default IndexPage;