Feature/nextjs#66

client/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

client/next-env.d.ts

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

client/package.json

@@ -4,9 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack-dev-server",
-    "webpack": "webpack",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
   },
   "author": "",
   "license": "ISC",
@@ -21,6 +21,9 @@
     "axios": "^0.19.0",
     "formik": "^1.5.8",
     "install": "^0.13.0",
+    "next": "^9.1.2",
+    "next-redux-saga": "^4.0.2",
+    "next-redux-wrapper": "^4.0.1",
     "npm": "^6.11.1",
     "query-string": "^6.8.3",
     "react": "^16.9.0",
@@ -31,17 +34,21 @@
     "react-router-dom": "^5.0.1",
     "recompose": "^0.30.0",
     "redux": "^4.0.4",
+    "redux-devtools-extension": "^2.13.8",
     "redux-saga": "^1.1.1",
     "styled-components": "^4.3.2",
     "yup": "^0.27.0"
   },
   "devDependencies": {
+    "@types/next": "^8.0.6",
+    "@types/next-redux-saga": "^3.0.1",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-router": "^5.0.3",
     "@types/react-router-dom": "^4.3.5",
     "@typescript-eslint/eslint-plugin": "^2.0.0",
     "@typescript-eslint/parser": "^2.0.0",
+    "babel-plugin-styled-components": "^1.10.6",
     "eslint": "^6.1.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.1.0",
@@ -50,14 +57,11 @@
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^1.7.0",
-    "html-webpack-plugin": "^3.2.0",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1",
     "ts-loader": "^6.0.4",
     "typescript": "^3.5.3",
     "url-loader": "^2.1.0",
-    "webpack": "^4.39.2",
-    "webpack-cli": "^3.3.7",
-    "webpack-dev-server": "^3.8.0"
+    "webpack": "^4.41.2"
   }
 }

client/src/pages/Mypage.tsx → client/pages/Mypage.tsx

@@ -2,17 +2,20 @@ import * as React from "react";
 import styled from "styled-components";
 import { Fragment, useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import BaseAvatar from "../components/common/Avatar";
-import BaseUserName from "../components/common/UserName";
-import BaseNormalButton from "../components/common/Button/NormalButton";
+import BaseAvatar from "../src/components/common/Avatar";
+import BaseUserName from "../src/components/common/UserName";
+import BaseNormalButton from "../src/components/common/Button/NormalButton";
 import MainInputForm, {
   MainInput as BaseMainInput
-} from "../components/common/Form/MainInput";
-import Tags, { Tag as BaseTag } from "../components/common/Tag";
-import { mypageInputChange } from "../redux/MypageInput/action";
+} from "../src/components/common/Form/MainInput";
+import Tags, { Tag as BaseTag } from "../src/components/common/Tag";
+import { mypageInputChange } from "../src/redux/MypageInput/action";
 import axios from "axios";
-import Header from "../components/common/Header";
-import { myDataChangeSuccess, myDataChangeTags } from "../redux/MyData/action";
+import Header from "../src/components/common/Header";
+import {
+  myDataChangeSuccess,
+  myDataChangeTags
+} from "../src/redux/MyData/action";
 
 const Mypage: React.FC = () => {
   const dispatch = useDispatch();

client/src/pages/Signin/Signin.tsx → client/pages/Signin/index.tsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
 
-import SigninForm from "../../components/Signin/SigninForm";
-import SigninFormFormik from "../../components/Signin/SigninFormFormik";
+import SigninForm from "../../src/components/Signin/SigninForm";
+import SigninFormFormik from "../../src/components/Signin/SigninFormFormik";
 
 const Signin: React.FC = () => {
   const profile = useSelector((state: any) => state.signin.profile);

client/src/pages/Signup/SignupConfirm.tsx → client/pages/Signup/confirm.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import styled from "styled-components";
 import { useSelector } from "react-redux";
 
-import SignupFormConfirm from "../../components/Signup/SignupFormConfirm";
+import SignupFormConfirm from "../../src/components/Signup/SignupFormConfirm";
 
 const SignupConfirm = () => {
   const profile = useSelector((state: any) => state.signup.profile);

client/src/pages/Signup/Signup.tsx → client/pages/Signup/index.tsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
 
-import SignupForm from "../../components/Signup/SignupForm";
-import SignupFormFormik from "../../components/Signup/SignupFormFormik";
+import SignupForm from "../../src/components/Signup/SignupForm";
+import SignupFormFormik from "../../src/components/Signup/SignupFormFormik";
 
 const Signup: React.FC = () => {
   const profile = useSelector((state: any) => state.signup.profile);

client/src/pages/User.tsx → client/pages/User/[id].tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import styled from "styled-components";
 import { Fragment, useState, useEffect } from "react";
-import BaseAvatar from "../components/common/Avatar";
-import BaseUserName from "../components/common/UserName";
-import Tags from "../components/common/Tag";
+import { useRouter } from "next/router";
+import BaseAvatar from "../../src/components/common/Avatar";
+import BaseUserName from "../../src/components/common/UserName";
+import Tags from "../../src/components/common/Tag";
 import axios from "axios";
-import Header from "../components/common/Header";
+import Header from "../../src/components/common/Header";
 const queryString = require("query-string");
-const hashImage = require("../assets/images/hash.jpg");
 
 type Props = {
   location: {
@@ -22,8 +22,8 @@ const User: React.FC<Props> = props => {
     hashID: "",
     tags: []
   });
-  const qs = queryString.parse(props.location.search);
-  const userId = qs.id;
+  const router = useRouter();
+  const userId = router.query.id;
 
   useEffect(() => {
     if (localStorage.getItem("token")) {
@@ -35,7 +35,10 @@ const User: React.FC<Props> = props => {
           }
         })
         .then(res => {
-          setUserData({ ...res.data, avatar: hashImage });
+          setUserData({
+            ...res.data,
+            avatar: "/static/assets/images/hash.jpg"
+          });
         })
         .catch(err => {
           console.log(err);

client/src/pages/Users.tsx → client/pages/Users/[tag].tsx

@@ -1,14 +1,14 @@
 import * as React from "react";
 import { Fragment, useState, useEffect } from "react";
 import styled from "styled-components";
-import UserCassette from "../components/UserCassette";
 import axios from "axios";
-import Header from "../components/common/Header";
+import { useRouter } from "next/router";
+import UserCassette from "../../src/components/UserCassette";
+import Header from "../../src/components/common/Header";
 import {
   NoData as BaseNoData,
   NoDataText as BaseNoDataText
-} from "../components/common/NoData";
-const queryString = require("query-string");
+} from "../../src/components/common/NoData";
 
 type Props = {
   location: {
@@ -18,8 +18,8 @@ type Props = {
 
 const UserList: React.FC<Props> = props => {
   const [users, setUsers] = useState([]);
-  const qs = queryString.parse(props.location.search);
-  const tag = qs.tag;
+  const router = useRouter();
+  const { tag } = router.query;
 
   useEffect(() => {
     if (localStorage.getItem("token")) {
@@ -58,7 +58,7 @@ const UserList: React.FC<Props> = props => {
         <NoData className="">
           <NoDataText
             className=""
-            searchWord={tag}
+            searchWord={tag[0]}
             targetField="ユーザー"
           ></NoDataText>
         </NoData>

client/pages/_App.tsx

@@ -0,0 +1,46 @@
+import App from "next/app";
+import * as React from "react";
+import { useEffect } from "react";
+import { Provider, useDispatch } from "react-redux";
+import withRedux from "next-redux-wrapper";
+import withReduxSaga from "next-redux-saga";
+import { configureStore } from "../src/redux/store";
+import {
+  myDataChangeStart,
+  myDataChangeFailed
+} from "../src/redux/MyData/action";
+import GlobalStyle from "../src/components/constants/GlobalStyle";
+
+interface IProps {
+  Component: React.Component;
+  store: any;
+}
+
+// ユーザ情報の取得処理
+const GlobalState: React.FC = ({ children }) => {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    if (localStorage.getItem("token")) {
+      dispatch(myDataChangeStart());
+    } else {
+      dispatch(myDataChangeFailed());
+    }
+  }, []);
+  return <>{children}</>;
+};
+
+class MyApp extends App<IProps> {
+  render() {
+    const { Component, pageProps, store } = this.props;
+    return (
+      <Provider store={store}>
+        <GlobalState>
+          <Component {...pageProps} />
+          <GlobalStyle />
+        </GlobalState>
+      </Provider>
+    );
+  }
+}
+
+export default withRedux(configureStore)(withReduxSaga(MyApp));

client/pages/_document.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import Document, {
+  DocumentContext,
+  Html,
+  Head,
+  Main,
+  NextScript
+} from "next/document";
+import { ServerStyleSheet } from "styled-components";
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    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>
+        <html lang="ja">
+          <Head>
+            <meta charSet="UTF-8" />
+            <meta
+              name="viewport"
+              content="width=device-width, initial-scale=1.0"
+            />
+            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+            <title>hash</title>
+            <link
+              href="https://fonts.googleapis.com/css?family=Lobster&display=swap"
+              rel="stylesheet"
+            />
+          </Head>
+          <body>
+            <Main />
+            <NextScript />
+          </body>
+        </html>
+      </Html>
+    );
+  }
+}

client/src/pages/Home.tsx → client/pages/index.tsx

@@ -5,24 +5,25 @@ import styled from "styled-components";
 import { IoIosSearch } from "react-icons/io";
 import BaseMainInputForm, {
   MainInput as BaseMainInput
-} from "../components/common/Form/MainInput";
-import BaseLogo from "../components/common/Logo";
-import Header from "../components/common/Header";
-import { homeInputChange } from "../redux/HomeInput/action";
-import { withRouter, RouteComponentProps } from "react-router";
-import Loading from "../components/common/Loading";
+} from "../src/components/common/Form/MainInput";
+import BaseLogo from "../src/components/common/Logo";
+import Header from "../src/components/common/Header";
+import { homeInputChange } from "../src/redux/HomeInput/action";
+import Router from "next/router";
+// import { withRouter, RouteComponentProps } from "react-router";
+import Loading from "../src/components/common/Loading";
 
-type Props = {} & RouteComponentProps;
+type Props = {};
 
-const Home: React.FC<Props> = ({ history }) => {
+const Home: React.FC<Props> = ({}) => {
   const dispatch = useDispatch();
   const homeInput = useSelector((state: any) => state.homeInput.search);
   const myData = useSelector((state: any) => state.myData);
 
   const homeSearch = (e: any) => {
     e.preventDefault();
     dispatch(homeInputChange(""));
-    history.push(`/users?tag=${homeInput}`);
+    Router.push(`/users/${homeInput}`);
   };
 
   const inputChange = (inputValue: string) => {
@@ -117,4 +118,4 @@ const MainInput = styled(BaseMainInput)`
   }
 `;
 
-export default withRouter(Home);
+export default Home;