サクッと簡単な課金ページを作る

## Next.js プロジェクトの作成

まず Next.js でプロジェクトを作成します。
Vercel & Next.js がとても楽なので最近はこの構成でやってます。

```bash
% npx create-next-app --typescript
```

https://nextjs.org/docs

## Tailwind CSS の導入

次に Tailwind CSS を入れます。

Tailwind CSS を使うと、class周りがゴチャっとしますが
class名を考えたりとかを、しなくてもいいのでダル〜っとやりたいととても良いです。

https://tailwindcss.com/docs/guides/nextjs

ここを見て、さっきの Next.js プロジェクトに Tailwind CSS を跡付けします。

`Creating your project` だとJSでプロジェクトができちゃったので
`Setting up Tailwind CSS` のステップのほうがおすすめです。

## 下書き

ざっくり配置します。

```tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import Link from 'next/link'

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>よね研3rd</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <div>
          <div>
            よね研3rd
          </div>
        </div>

        <br />
        <br />

        <div>
          米本剛士<br />
          徳島出身・東京在住の起業経験ありiPhoneアプリのクリエイターです。<br />
          主にiOS & Firebase & React.jsを扱います。<br />
        </div>

        <br />
        <br />
        <br />

        <div>
          私が主催しておりますプライベートなSlackコミュニティにご招待致します。<br />
          チャット形式で、SwiftやNext.js(React) & Firebaseなどのアドバイスや質問の回答が行えます。<br />
          <br />
          回答はアドバイス的でかつ、ベストエフォートなので<br />
          確実にサクッと答えが得たい場合は他のプランが最適です。<br />
          （と言いつつ、お役に立てるようにしっかりがんばりますよっ！）<br />
          <br />
          【おすすめな方】<br />
          ・アドバイスを得て効率よく学習を進めたい<br />
          ・気軽に質問がしたい<br />
          ・コミュニティでワイワイ開発したい<br />
          <br />
          【非推奨】<br />
          ・相談などが他のコミュニティメンバーに見られたくない<br />
          ・すぐに答えが知りたい方<br />
          ・作業を丸投げしたい方<br />
        </div>

        <Link href="https://buy.stripe.com/00gdSk7o6h158Sc28b">
          <a target="_blank">参加する</a>
        </Link>
      </div>
    </div>
  )
}

export default Home
```

こんな感じです。

![スクリーンショット 2021-09-09 18.23.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6678/98d27298-9333-e39d-f113-02808a89c1eb.png)

## 仕上げ

```tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import Link from 'next/link'
import Image from 'next/image'
import icon from '../public/icon.jpg'

const Home: NextPage = () => {
  return (
    <div className="flex-col justify-center m-auto max-w-screen-md">
      <Head>
        <title>よね研3rd</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="mt-20">
        <div className="text-center">
          <h1 className="text-4xl font-bold">
            よね研3rd
          </h1>
          <div className="mt-2">
            プログラミング活動Slackコミュニティ
          </div>
        </div>

        <h2 className="text-xl mt-10 ml-5">1️⃣ コミュニティ主催者の紹介</h2>

        <div className="mt-5 mx-5 rounded leading-relaxed flex block">
          <div className="flex-shrink-0">
            <Image src={icon} width={140} height={140} alt="yoneapp" className="mx-auto rounded-full" />
          </div>
          <div className="flex-row ml-5 mt-5">
            <div className="font-bold text-xl">
              米本剛士
            </div>
            <div className="mt-2">
              徳島出身・東京在住の起業経験あり34歳のiPhoneアプリのクリエイターです。
              主にiOS & Firebase & React.jsを扱います。
            </div>
          </div>
        </div>

        <div className="mt-10 p-5 bg-gray-100 lg:rounded leading-relaxed">
          <h2 className="text-xl mb-5">2️⃣ コンテンツ内容</h2>
          プライベートなSlackコミュニティにご招待致します。<br />
          <br />
          チャット形式で、SwiftやNext.js(React) & Firebaseなどの相談が行えます。<br />
          回答はアドバイス的でかつ、ベストエフォートとなります。<br />
          （と言いつつ、お役に立てるようにしっかりがんばりますよっ！）<br />
          <br />
          【おすすめな方】<br />
          ・アドバイスを得て効率よく学習を進めたい<br />
          ・気軽に質問がしたい<br />
          ・コミュニティでワイワイ開発したい<br />
          <br />
          【非推奨な方】<br />
          ・相談などが他のコミュニティメンバーに見られたくない<br />
          ・答えだけ知りたい方<br />
          ・作業を丸投げしたい方<br />
        </div>

        <Link href="https://buy.stripe.com/00gdSk7o6h158Sc28b">
          <a target="_blank" className="mt-10 p-5 bg-green-500 md:rounded leading-relaxed text-white font-bold block text-center text-2xl">
            参加する 2980円/月
          </a>
        </Link>
      </div>
    </div>
  )
}

export default Home
```

課金部分は力尽きました。

StripeがURL式の課金システム持ってるので
それをぶち込みましょう、完成です。

Tailwind CSSの
`flex-col justify-center m-auto max-w-screen-md`
この辺が特徴的ですよね。

横にすごく長くなっちゃう感じはありますが
CSSに触れたことがあればなんとなく直感的に書けそうな感じです。

これをVercelにアップロードして完成です。

というわけでプログラミング活動Slackコミュニティ「よね研3rd」の紹介課金ページができました✌️
立ち上げということで、はりきって回答しますので良かったら参加してくださいませ🙇‍♂️

https://lab.yoneapp.com/