바삭바삭하고 간단한 결제 페이지 만들기

17155 단어 스트라이프Reactnext.jsVerceltailwindcss

Next.js 프로젝트 만들기



먼저 Next.js에서 프로젝트를 만듭니다.
Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다.
% npx create-next-app --typescript

Tailwind CSS 도입



그런 다음 Tailwind CSS를 넣습니다.

Tailwind CSS를 사용하면 클래스 주위가 엉망입니다.
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」의 소개 과금 페이지가 생겼습니다✌️
시작이라고 하는 것으로, 확실히 회답하므로 좋으면 참가해 주세요 🙇‍♂️
Stripe의 subscriptions에서 `This customer has no attached payment source or default payment method.` 오류가 발생하여 결제 처리가 불가능합니다.
Stripe에서 JPY 이외의 결제 통화를 지정할 때의 주의점

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage