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

17397 ワード
stripe React next.js Vercel tailwindcss stripe テキストリンク

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

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

% npx create-next-app --typescript

Tailwind CSS の導入

次に Tailwind CSS を入れます。

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

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

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

下書き

ざっくり配置します。

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

こんな感じです。

仕上げ

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」の紹介課金ページができました✌️
立ち上げということで、はりきって回答しますので良かったら参加してくださいませ🙇‍♂️