Installation

var Component=(()=>{var E=Object.create;var i=Object.defineProperty;var =Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),I=(a,e)=>{for(var t in e)i(a,t,{get:e[t],enumerable:!0})},c=(a,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of u(e))!g.call(a,l)&&l!==t&&i(a,l,{get:()=>e[l],enumerable:!(r=(e,l))||r.enumerable});return a};var L=(a,e,t)=>(t=a!=null?E(y(a)):{},c(e||!a||!a.__esModule?i(t,"default",{value:a,enumerable:!0}):t,a)),T=a=>c(i({},"__esModule",{value:!0}),a);var s=m((S,d)=>{d.exports=_jsx_runtime});var P={};I(P,{default:()=>h,frontmatter:()=>N});var n=L(s()),N={title:"Installation",description:"How to install the project."};function o(a){let e={a:"a",code:"code",figcaption:"figcaption",figure:"figure",h3:"h3",img:"img",p:"p",pre:"pre",span:"span",...a.components},{Callout:t,Steps:r}=e;return t||p("Callout",!0),r||p("Steps",!0),(0,n.jsxs)(r,{children:[(0,n.jsxs)(e.h3,{id:"create-project",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#create-project",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Create project"]}),(0,n.jsxs)(e.p,{children:["Start by creating a new Next.js project using ",(0,n.jsx)(e.code,{children:"create-next-app"}),":"]}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark",rawString:npx create-next-app my-saas-project --example "https://github.com/mickasmt/next-saas-stripe-starter" ,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" create-next-app"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" my-saas-project"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" --example"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "https://github.com/mickasmt/next-saas-stripe-starter"'})]})})})}),(0,n.jsx)(e.p,{children:"Or deploy with Vercel :"}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmickasmt%2Fnext-saas-stripe-starter",children:(0,n.jsx)(e.img,{src:"https://vercel.com/button",alt:"Deploy with Vercel"})})}),(0,n.jsx)(t,{type:"warning",twClass:"mt-4",children:(0,n.jsx)(e.p,{children:A good way to create your repository, but the deployment will fail because you need to add your environment variables locally in your project. Follow the documentation for that.})}),(0,n.jsxs)(e.h3,{id:"install-dependencies",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#install-dependencies",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Install dependencies"]}),(0,n.jsx)(e.p,{children:"Enter in the folder and install dependencies for your project:"}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark",rawString:cd my-saas-project pnpm install ,children:(0,n.jsxs)(e.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"cd"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" my-saas-project"})]}), ,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"pnpm"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" install"})]})]})})}),(0,n.jsxs)(e.h3,{id:"create-a-env-file",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#create-a-env-file",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Create a ",(0,n.jsx)(e.code,{children:".env"})," file"]}),(0,n.jsxs)(e.p,{children:["Copy/paste the ",(0,n.jsx)(e.code,{children:".env.example"})," in the ",(0,n.jsx)(e.code,{children:".env"})," file:"]}),(0,n.jsxs)(e.figure,{"data-rehype-pretty-code-figure":"",children:[(0,n.jsx)(e.figcaption,{"data-rehype-pretty-code-title":"","data-language":"md","data-theme":"github-dark",children:".env"}),(0,n.jsx)(e.pre,{tabIndex:"0","data-language":"md","data-theme":"github-dark",rawString:`NEXT_PUBLIC_APP_URL=http://localhost:3000

AUTH_SECRET= GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= GITHUB_OAUTH_TOKEN=

DATABASE_URL=

RESEND_API_KEY= EMAIL_FROM=

STRIPE_API_KEY= STRIPE_WEBHOOK_SECRET=

NEXT_PUBLIC_STRIPE_PRO_MONTHLY_PLAN_ID= NEXT_PUBLIC_STRIPE_PRO_YEARLY_PLAN_ID= NEXT_PUBLIC_STRIPE_BUSINESS_MONTHLY_PLAN_ID= NEXT_PUBLIC_STRIPE_BUSINESS_YEARLY_PLAN_ID= ,children:(0,n.jsxs)(e.code,{"data-language":"md","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"NEXT_PUBLIC_APP_URL=http://localhost:3000"})}), ,(0,n.jsx)(e.span,{"data-line":"",children:" "}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"AUTH_SECRET="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"GOOGLE_CLIENT_ID="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"GOOGLE_CLIENT_SECRET="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"GITHUB_OAUTH_TOKEN="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:" "}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"DATABASE_URL="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:" "}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"RESEND_API_KEY="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"EMAIL_FROM="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:" "}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"STRIPE_API_KEY="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"STRIPE_WEBHOOK_SECRET="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:" "}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"NEXT_PUBLIC_STRIPE_PRO_MONTHLY_PLAN_ID="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"NEXT_PUBLIC_STRIPE_PRO_YEARLY_PLAN_ID="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"NEXT_PUBLIC_STRIPE_BUSINESS_MONTHLY_PLAN_ID="})}), ,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"NEXT_PUBLIC_STRIPE_BUSINESS_YEARLY_PLAN_ID="})})]})})]}),(0,n.jsxs)(e.h3,{id:"configuration-part",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#configuration-part",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Configuration part"]}),(0,n.jsxs)(e.p,{children:["Let's check the configuration part for update all environment variables before use ",(0,n.jsx)(e.code,{children:"pnpm run dev"}),"."]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(o,{...a})}):o(a)}function p(a,e){throw new Error("Expected "+(e?"component":"object")+" "+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(P);})(); ;return Component;