常連

注目の的

### 質問
Next.js + TypeScriptの勉強のため以下のリポジトリの改造を試みています。
https://github.com/jasonraimondi/nextjs-jwt-example
getServerSidePropsをComponentで使用する場合の書き方が分からず詰まってしまいました。

### 発生している問題・エラーメッセージ
web/components/private_route.tsx
```
import ServerCookie from "next-cookies";
import Router from "next/router";
import React, { Component } from "react";
import { COOKIES } from "../services/login_service";
import { AuthToken } from "../services/auth_token";

export type AuthProps = {
  auth: AuthToken
}

export function privateRoute(WrappedComponent: any) {
  return class extends Component<AuthProps> {
    static async getInitialProps(ctx: any) {
      const token = ServerCookie(ctx)[COOKIES.authToken];
      const auth = new AuthToken(token);
      const initialProps = { auth };
      if (auth.isExpired) {
        ctx.res.writeHead(302, {
          Location: "/login?redirected=true",
        });
        ctx.res.end();
      }
      if (WrappedComponent.getInitialProps) return WrappedComponent.getInitialProps(initialProps);
      return initialProps;
    }

    get auth() {
      // the server pass to the client serializes the token
      // so we have to reinitialize the authToken class
      //
      // @see https://github.com/zeit/next.js/issues/3536
      return new AuthToken(this.props.auth.token);
    }

    render() {
      return <WrappedComponent auth={this.auth} {...this.props} />;
    }
  };
}
```
を
Next.js9.3以降ではgetInitialPropsではなくgetServerSideProps等が推奨されるとのことから、
以下のような形に書き換えたいと思っています。
```
import ServerCookie from "next-cookies";
import Router from "next/router";
import React, { Component } from "react";
import { COOKIES } from "../services/login_service";
import { AuthToken } from "../services/auth_token";
import { GetServerSideProps } from "next";

export type AuthProps = {
  auth: AuthToken
}

export function privateRoute(WrappedComponent: any) {
  return class extends Component<AuthProps> {
    // static async getInitialProps(ctx: any) {
    //   const token = ServerCookie(ctx)[COOKIES.authToken];
    //   const auth = new AuthToken(token);
    //   const initialProps = { auth };
    //   if (auth.isExpired) {
    //     ctx.res.writeHead(302, {
    //       Location: "/login?redirected=true",
    //     });
    //     ctx.res.end();
    //   }
    //   if (WrappedComponent.getInitialProps) return WrappedComponent.getInitialProps(initialProps);
    //   return initialProps;
    // }

    get auth() {
      // the server pass to the client serializes the token
      // so we have to reinitialize the authToken class
      //
      // @see https://github.com/zeit/next.js/issues/3536
      return new AuthToken(this.props.auth.token);
    }

    render() {
      return <WrappedComponent auth={this.auth} {...this.props} />;
    }
  };
}

export const getServerSideProps: GetServerSideProps = async (ctx : any) => {
      const token = ServerCookie(ctx)[COOKIES.authToken];
      const auth = new AuthToken(token);
      const initialProps = { auth };
      if (auth.isExpired) {
        ctx.res.writeHead(302, {
          Location: "/login?redirected=true",
        });
        ctx.res.end();
      }
      if (WrappedComponent.getInitialProps) return WrappedComponent.getInitialProps(initialProps);
      return initialProps;
}


```
実際に上記の通り書き換えたところ、
(1) getServerSidePropsでreturnしているpropsをprivateRoute関数内で使用したいが、受け渡し方法が分からない。
(2) if (WrappedComponent.getInitialProps) return WrappedComponent.getInitialProps(initialProps);の「WrappedComponent」の部分で「名前 'WrappedComponent' が見つかりません。」とシンタックスエラーが出る。またgetInitialPropsではなくgetServerSidePropsへの書き換え方が分からない。
という問題が出て、詰まっています。
(1)については、公式ドキュメントの解説どおり「function Page({ data }) {」のようにすべきかと思いましたが、このコードの場合、Componentで引数としてWrappedComponentを取るため、こういう場合どのように書けば良いのか分からない状態です。
https://nextjs.org/docs/basic-features/data-fetching#simple-example-1
ちなみにこちらのComponentは、
web/pages/dashboard.tsx
などで使用されており、ログイン時にのみ見れるページを作成する為のComponentになり、Pageのコードにて「export default privateRoute(Page);」のような書き方で使用します。

### 質問
(1),(2)それぞれどのようにすれば解消出来るでしょうか。
Next.js TypeScript共に初心者であるため、見当違いのことをしていれば申し訳ございません。ご指摘いただければ幸いです。
### 試したこと
getServerSidePropsに関して公式ドキュメントを読んだり
GitHubで類似のコードを探したり書き方を数日模索しましたが、分かりませんでした。
### 補足情報（FW/ツールのバージョンなど）
Next.js 9.5
TypeScript 3.5

Next.js+TypeScriptにてgetInitialPropsではなくgetServerSidePropsを使用したいが書き方が分からない。

### 前提・実現したいこと

next.jsでwebアプリを作成し、ローカルホストでブラウザから見れるようにしました。
このアプリをoracleの無料サーバーにアップロードし、ブラウザからIPアドレスを入力し閲覧できるようにしたいです。
サーバーを建て、設定なども行い、/var/www/html/にHTMLファイルを置けばブラウザから閲覧可能な状態になりました。

教えていただきたいこと
1、next.jsのフォルダを置く場所は/var/www/html/であっていますか？
2、上記の1が正しければ、どのような状態(npm run build もよく理解していません)でフォルダを置けば良いですか？
3、その他サーバー上でnext.jsのアプリを動かすために必要なことがあれば教えてください。

### 試したこと

・/var/www/html/にnext.jsのアプリフォルダをそのままペーストした
・npm run buildした後にnext.jsのアプリフォルダ内の.next フォルダを/var/www/html/にペーストした
・上記の.nextフォルダ内のcache、server、staticフォルダをそれぞれペーストした

### 補足情報（FW/ツールのバージョンなど）

サーバーはoracle cloudのcentOS7の仮想マシンでWindows10からssh接続しています。
サーバーにはphp、Apache、node.jsはインストール済みです。
node.js : v12.19.0
npm : 6.14.8

next.jsのアプリ作成やlocalhostでの実行はWindows10のPCで行いました。
node.js : v14.13.1
npm : 6.14.8


見当違いなこと、してたらすみません????
回答よろしくお願い致します????‍♂️

サーバーにnext.jsアプリをデプロイする方法

# 「@typescript-eslintというプラグインが重複している」といわれておりますが、どこのどのコードを削除すればいいかわかりません。

現在、初めてFirebaseにてReactのアプリケーション構築を学習しています。
以下のエラー文の解決ができず、先にすすめていない状況です。


**エラー文（ターミナル）**

```

ESLint: 7.10.0

ESLint couldn't determine the plugin "@typescript-eslint" uniquely.

- /Users/tarou//test/chatbot-demo/functions/node_modules/@typescript-eslint/eslint-plugin/dist/index.js (loaded in ".eslintrc.js")
-  (loaded in "../package.json » eslint-config-react-app#overrides[0]")

Please remove the "plugins" setting from either config or remove either plugin installation.

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! functions@ lint: `eslint 'src/**/*'`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the functions@ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tarou/.npm/_logs/2020-09-27T04_11_32_364Z-debug.log

Error: functions predeploy error: Command terminated with non-zero exit code2


```


**.eslint.jsファイル↓**
```
module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: [
    "plugin:import/errors",
    "plugin:import/warnings",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "tsconfig.json",
    sourceType: "module",
  },
  plugins: [
    "@typescript-eslint",
    "import",
  ],
  rules: {
    "@typescript-eslint/adjacent-overload-signatures": "error",
    "@typescript-eslint/no-empty-function": "error",
    "@typescript-eslint/no-empty-interface": "warn",
    "@typescript-eslint/no-floating-promises": "error",
    "@typescript-eslint/no-namespace": "error",
    "@typescript-eslint/no-unnecessary-type-assertion": "error",
    "@typescript-eslint/prefer-for-of": "warn",
    "@typescript-eslint/triple-slash-reference": "error",
    "@typescript-eslint/unified-signatures": "warn",
    "comma-dangle": "warn",
    "constructor-super": "error",
    eqeqeq: ["warn", "always"],
    "import/no-deprecated": "warn",
    "import/no-extraneous-dependencies": "error",
    "import/no-unassigned-import": "warn",
    "no-cond-assign": "error",
    "no-duplicate-case": "error",
    "no-duplicate-imports": "error",
    "no-empty": [
      "error",
      {
        allowEmptyCatch: true,
      },
    ],
    "no-invalid-this": "error",
    "no-new-wrappers": "error",
    "no-param-reassign": "error",
    "no-redeclare": "error",
    "no-sequences": "error",
    "no-shadow": [
      "error",
      {
        hoist: "all",
      },
    ],
    "no-throw-literal": "error",
    "no-unsafe-finally": "error",
    "no-unused-labels": "error",
    "no-var": "warn",
    "no-void": "error",
    "prefer-const": "warn",
  },
  settings: {
    jsdoc: {
      tagNamePreference: {
        returns: "return",
      },
    },
  },
};

```



ググっても同じような事例をみつけられず、、、迷走してしまっています。

# 仮設と試したこと

・プラグインが2つあるので削除すればよさそう？
・@typescript-eslintという場所を探せばいいのでは？

package.jsonにあった。

```

"@typescript-eslint/eslint-plugin": "^3.9.1",
"@typescript-eslint/parser": "^3.8.0",
```

でもどっちを削除すればいいのか？
または、このファイルではない？

Firebaseを初めて使用するため、安易にデプロイするのはよくないかも？
っと思い、質問に至りました。

# 環境補足

nodeバージョン：v12.18.3

その他package.json情報

```
{
  "name": "functions",
  "scripts": {
    "lint": "eslint 'src/**/*'",
    "build": "tsc",
    "serve": "npm run build && firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "10"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^8.10.0",
    "firebase-functions": "^3.6.1"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.8.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "^2.22.0",
    "typescript": "^3.8.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

```


もし詳しい方がいらっしゃいましたら、ご教授いただけますと幸いです。

最後までみていただきありがとうございます。

Firebaseでデプロイ時に@typescript-eslintが一意ではないというエラーが発生してしまう。

PCに保存されている画像を見るための、
簡単なイメージビュワーのWebアプリを作ろうと考えています。（自宅LAN内で使用するのみで、インターネットへ公開はしません）
機能として最低限、画像にタグをつけて管理し、そのタグで表示する画像の一覧をフィルタリングできるようにはしたいです。

アプリの構成を考えているのですが、Webアプリの知識があまりないためどうデザインするのがいいのか悩んでいます。
ネットでざっくり調べて構成を考えてみたのですが、果たして効率のいいやり方なのか、そもそもちゃんと動くのかも分かりません。

とりあえず考えたのは、
ーーーーーーーーーーーー
クライアントがCGIにアクセス（cgiプログラムはpythonで記述）

↓

選択されたタグを元に、表示する画像のＩＤのリストをテキストファイルに保存
（ＩＤ，タグ等はデータベースで管理）

↓

javascript でテキストファイルを読んで、リストにある画像を出力
ーーーーーーーーーーーー

のような形です。
説明が分かりにくくて済みません。
特に、入力に応じて適宜表示するコンテンツを変えていくにはどうすればいいのかが分かりません。
一般的なアプリの構成や、上記の構成で変えたほうがいい点などがありましたら教えてください。


[開発環境]
OS: Windows10