## ドキュメント

- [フック API リファレンス – React](https://ja.reactjs.org/docs/hooks-reference.html#useeffect)

> useEffectは、コンポーネントがレンダリング後に何かを行う必要があることをReactに伝えます。

## 実装

レンダリング時に一度実行する

```jsx
useEffect(() => {
  someFunc(); // 実行
}, []);
```

値が入ってきた時に、実行する

```jsx
const { data: user, error } = useSWR('/api/user');

// userが存在すれば実行する
useEffect(() => {
  someFunc(); // 実行
}, [user]);
```

Next.js ページのレンダリング時に関数を実行する

<h2>ドキュメント</h2>
<ul>
<li><a href="https://ja.reactjs.org/docs/hooks-reference.html#useeffect">フック API リファレンス – React</a>...

```sh
yarn add @types/gtag.js
```

```sh
touch lib/gtag.ts
```

```sh
echo "NEXT_PUBLIC_GA_TRACKING_ID=" >> .env
echo "NEXT_PUBLIC_GA_TRACKING_ID=" >> .env.sample
```

```gtag.ts
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID;

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: string): void => {
  if (!GA_TRACKING_ID) return;
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  });
};
```

Next.jsにGoogle Analyticsを導入する

## ドキュメント

- [API Routes: Introduction | Next.js](https://nextjs.org/docs/api-routes/introduction)
- [HTTP リクエストメソッド - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Methods)

## 実装

```js
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

  switch (req.method) {

  case 'GET':
    res.status(200).json({ message: 'GET' })
    break

  case 'POST':
    res.status(200).json({ message: 'POST' })
    break

  case 'PATCH':
    res.status(200).json({ message: 'PATCH' })
    break

  case 'DELETE':
		res.status(200).json({ message: 'PATCH' })
    break

  default:
    res.status(405).end()
    break
  }
}
```

## API呼び出し

axiosを使用し、API を呼び出します。

```bash
yarn add axios
```

```js
// GET Method
await axios.get('/api/user', {
  params: {
    id: userId
  }
})

// POST Method
await axios.post('/api/user', {
	id: userId
})

// PATCH Method
await axios.patch('/api/user', {
	id: userId
})

// DELETE Method
await axios.delete('/api/user', {
  params: {
    id: userId
  }
})
```

- GET と DELETE は、リクエストのクエリに値を持つことができます（Bodyには含めることができません）
- POST と PATCH は、Bodyに値を持つことができます

`getServerSideProps`で API Routes を呼び出すのはあまりよくなさそうです 🤔

[use getStaticProps with /api routes · Discussion #16068 · vercel/next.js](https://github.com/vercel/next.js/discussions/16068)

## 値の取得

```js
const { id } = req.query // GET DELETE
const { id } = req.body // POST PATCH
```

## NextAuth

NextAuthを使用している場合は、sessionからuserIdを呼び出すこともできます。

- [Securing pages and API routes | NextAuth.js](https://next-auth.js.org/tutorials/securing-pages-and-api-routes#using-getsession)

```js
import type { NextApiRequest, NextApiResponse } from 'next'
import { getSession } from 'next-auth/client'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const session = await getSession({ req })

  if (!session?.user?.id) {
    res.status(401).send({ message: 'Unauthorized' })
    return
  }

  const userId = session.user.id
}
```

sessionにuserIdを含めるには、 `pages/api/auth/[...nextauth].ts`の `callbacks.session` を変更します。

- [Callbacks | NextAuth.js](https://next-auth.js.org/configuration/callbacks#session-callback)
- [How to get userId on api Endpoints while using next-auth · Discussion #536 · nextauthjs/next-auth](https://github.com/nextauthjs/next-auth/discussions/536)

```js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { prisma } from '@/lib/server/prismaClient'

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  adapter: PrismaAdapter(prisma),
  callbacks: {
    session: async (session, user) => {
      return Promise.resolve({
        ...session,
        user: {
          ...session.user,
          id: user.id // 👈 ココ
        }
      })
    }
  }
})
```

Next.js API Routes で REST API 実装

`-p {PORT}`で変更する。

```package.json
"scripts": {
  "dev": "next dev -p 4000"
}
```

```bash
yarn dev
# or 
npm run dev
```

Next.js port 変更

## Nest.js

```bash
yarn add passport @nestjs/passport passport-jwt jwks-rsa
```

`ExtractJwt.fromAuthHeaderAsBearerToken()`のところで、`BearerToken`を扱っているようです。

```jwt.strategy.ts
import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';
import { passportJwtSecret } from 'jwks-rsa';
import * as dotenv from 'dotenv';

dotenv.config();

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      secretOrKeyProvider: passportJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: `${process.env.AUTH0_ISSUER_URL}.well-known/jwks.json`,
      }),

      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(), // 👈 ポイント
      audience: process.env.AUTH0_AUDIENCE,
      issuer: `${process.env.AUTH0_ISSUER_URL}`,
      algorithms: ['RS256'],
    });
  }

  validate(payload: unknown): unknown {
    return payload;
  }
}
```

```auth.module.ts
import { Module } from '@nestjs/common';
import { PassportModule } from '@nestjs/passport';
import { JwtStrategy } from './jwt.strategy';

@Module({
  imports: [PassportModule.register({ defaultStrategy: 'jwt' })],
  providers: [JwtStrategy,],
  exports: [PassportModule],
})
export class AuthModule {}
```

```users.controller.ts
import { Controller, Get, UseGuards } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

@Controller('users')
export class UsersController {
  @Get('public')
  async test() {
    return '✅ Public API!'
  }

  @UseGuards(AuthGuard('jwt')) // 👈 ガード
  @Get('private')
  async private() {
    return '✅ Private API!'
  }
}
```

## Next.js

**※accessTokenが無い(or違う)と、`users/private`APIは401です。**

```index.js
import axios from "axios";
import { useAuth0 } from "@auth0/auth0-react";

const { getAccessTokenSilently } = useAuth0();

const publicApi = async () => {
  try {
    const res = await axios.get('http://localhost:8080/users/public')
    console.log('✅ res', res);
  } catch (e) {
    console.log(e.message);
  }
}

const privateApi = async () => {
  try {
    const accessToken = await getAccessTokenSilently({
      audience: process.env.NEXT_PUBLIC_AUTH0_AUDIENCE,
      scope: "read:current_user",
    });

    console.log('✅ accessToken', accessToken);

    const res = await axios.get('http://localhost:8080/users/private', {
      headers: {
        Authorization: `Bearer ${accessToken}`, // 👈 accessToken を含める
      },
    });
    console.log('✅ res', res);
    } catch (e) {
    console.log(e.message);
  }
}
```

### 実装結果

![Next.js Next.js  Prisma](//images.contentful.com/0jyj5pjwic68/56mORPNJ9f1wy7Ow2Jp2EK/4bae97b0493b6ddc22ba4a8042c9a6a5/image.png)

## 環境変数

Nest.js

```.env
AUTH0_AUDIENCE='http://localhost:8080'
AUTH0_ISSUER_URL='https://xxxxx.jp.auth0.com/'
```

Next.js

```.env
NEXT_PUBLIC_AUTH0_DOMAIN="xxxxx.jp.auth0.com"
NEXT_PUBLIC_AUTH0_CLIENT_ID="xxxxx"
NEXT_PUBLIC_AUTH0_REDIRECT_URI="http://localhost:3000"
NEXT_PUBLIC_AUTH0_AUDIENCE="http://localhost:8080"
```

## ドキュメント

- [Full-Stack TypeScript Apps: Developing a Secure API with NestJS](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-authorization/)
- [Auth0 React SDK Quickstarts: Call an API](https://auth0.com/docs/quickstart/spa/react/02-calling-an-api)


Nest.js Next.js Auth0 JWT検証

ブラウザで使用したい場合は、`NEXT_PUBLIC_`を前につける

```.env
NEXT_PUBLIC_ANALYTICS_ID=xxxxx
```

```js
const x = process.env.NEXT_PUBLIC_ANALYTICS_ID;
```

つけない場合は、`getServerSideProps`や`getStaticProps`内でしかアクセスできない。

```.env
ANALYTICS_ID=xxxxx
```

```js
// Browser ❌ 
const x = process.env.ANALYTICS_ID;

// Server 🙆‍♂️
const x = process.env.ANALYTICS_ID;
```


Next.js Browser env

```bash
yarn add @auth0/auth0-react
```

```_app.js
import { Auth0Provider } from "@auth0/auth0-react";

function MyApp({ Component, pageProps }) {
  // 👇 Auth0コンソールで確認
  return (
    <Auth0Provider
      domain="xxx.jp.auth0.com"
      clientId="xxx"
      redirectUri="http://localhost:3000/"
    >
      <Component {...pageProps} />
    </Auth0Provider>
  )
}

export default MyApp
```

```index.js
import { useAuth0 } from "@auth0/auth0-react";

export default function Home() {
  const LoginButton = () => {
    const { loginWithRedirect } = useAuth0();

    return <button onClick={() => loginWithRedirect()}>Log In</button>;
  };

  return (
    <div>
        <LoginButton/>
    </div>
  )
}
```

`Allowed Callback URLs`と`Allowed Web Origins`を自分の開発環境と同じように設定しておく。

![Auth0 origin callback](//images.contentful.com/0jyj5pjwic68/4PMZbp3qVHkkvKkfLymigb/f8d1917dbdf5471d68918c6cd8be5667/____________________________2021-10-02_11.16.38.png)

Next.js Auth0 Login

`key="xxxx"`を設定すると、最後に読み込んだものが適用される。
`_app.tsx`でデフォルトのmetaタグを設定し、各ページコンポーネントで上書きしたいmetaタグを設定する。

以下、`key="og_title"`の例

```_app.jsx
function MyApp() {
  return (
    <>
      <Head>
        <meta property="og:title" content="Site name" key="og_title" />
      </Head>
      ...
    </>
  );
}
```

```index.jsx
function Index() {
  return (
    <>
      <Head>
        <meta property="og:title" content="Home" key="og_title" />
      </Head>
    </>
  );
}
```

[next/head | Next.js](https://nextjs.org/docs/api-reference/next/head)

Next.js metaタグ 重複を避ける

## 環境
- Next.js: v11.x

## Reduxを一言で

**「アプリのグローバル状態を管理するフレームワーク」**

親子間のコンポーネント程度であれば、`props` と `callback`で完結しますが、より大きな用途で使用する場合、`props` をバケツリレ−のように渡していくのは非常に辛いです。
その解決策として出ててくるのが、**グローバル状態** です。グローバル状態は、アプリのどのコンポーネントでも呼び出すことができ、更新することができます。そのフレームワークの1つが、 **Redux** です。

## Redux以外のフレームワークは？
- [Recoil](https://recoiljs.org/)
- SWR
- React.useContext
- [react-hooks-global-state](https://www.npmjs.com/package/react-hooks-global-state)

## インストール

## 参考
- [FAQ | Next.js](https://nextjs.org/docs/faq)
- [vercel/next.js/tree/canary/examples/with-redux](https://github.com/vercel/next.js/tree/canary/examples/with-redux): Next.jsのReduxサンプル
- [Getting Started with React Redux](https://react-redux.js.org/introduction/getting-started)
- [Reduxを分かりやすく解説してみた](https://future-architect.github.io/articles/20200429/)
- [Next.js の状態管理 2020](https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020)
- [Global state using only React Hooks with the Context API (No Redux)](https://codeburst.io/global-state-with-react-hooks-and-context-api-87019cc4f2cf)

Reduxについて勉強

## 設計

Google Analytics Reporting API からPV数の多い記事を取得し、build時にjsonに出力します。`next build`時に、jsonを読み取り静的出力します。

## 実装

```ga.js
const fs = require('fs');
require('dotenv').config();
const { google } = require('googleapis');

const client = new google.auth.JWT({
  email: process.env.GA_CLIENT_EMAIL,
  key: process.env.GA_PRIVATE_KEY?.replace(/\\n/g, '\n'), // 👈 置換する
  scopes: ['https://www.googleapis.com/auth/analytics.readonly'],
});

console.log('✅ Client作成');

const analyticsreporting = google.analyticsreporting({
  version: 'v4',
  auth: client,
});

async function getPopularPostData() {
  const res = await analyticsreporting.reports.batchGet({
    requestBody: {
      reportRequests: [
        {
          viewId: process.env.GA_VIEW_ID, // 👈 Analytics ViewID の指定
          pageSize: 50, // 👈 要求するページの数
          dateRanges: [
            {
              startDate: '30daysAgo',
              endDate: 'today',
            },
          ],
          metrics: [{ expression: 'ga:pageviews' }],
          dimensions: [{ name: 'ga:pagePath' }, { name: 'ga:pageTitle' }],
          orderBys: [{ fieldName: 'ga:pageviews', sortOrder: 'DESCENDING' }],
        },
      ],
    },
  });
  return res.data;
}

getPopularPostData().then((data) => {
  console.log('✅ 人気記事の取得');
  const { reports } = data;
  const gaRowData = reports ? reports[0]?.data?.rows ?? [] : [];
  const popularPaths = gaRowData
    .filter((row) => row.dimensions && row.dimensions[0]) // dimensions や dimensions[0] が存在するデータのみ抽出
    .map((row) => {
      return row.dimensions[0];
    });
  console.log('popularPaths:', popularPaths);
  fs.writeFile('ga.json', JSON.stringify(popularPaths), (err) => {
    console.log('🎉 ga.json生成');
  });
});
```

`ga.json`が生成される

## Vercelビルド時に実行

```pacakge.json
"scripts": {
  "build": "node ga.js && next build && next-sitemap"
}
```

## 表示

```index.jsx
export const getStaticProps: GetStaticProps<Props> = async () => {
  // 👇 `ga.json`から人気の記事を取得する
  let popularArticles = await Promise.all(
    popularPaths.map(async (path: string) => {
      let remakePath = path.replace('/', ''); // 👈 先頭の`/`を削除する
      console.log('✅ PATH:', path.replace('/', ''));

      if (remakePath) {
        let article = await client.getEntries({
          content_type: CONTENT_TYPE.ARTICLE,
          'fields.slug': remakePath,
        });
        if (article?.total === 1) {
          return article.items[0];
        }
      }
    })
  );
  popularArticles = popularArticles.filter(Boolean); // 👈 Falseな要素を削除
  if (popularArticles.length > 10) popularArticles.length = 10; // 👈 11個目の要素から全て削除
  ...
};
```

Next.js ページのレンダリング時に関数を実行する

ドキュメント

実装

Related

Tags

Share

Table of Contents