How I built a SaaS with Next.js in a week

• next-connect

  8 1,603 4.6 TypeScript

  The TypeScript-ready, minimal router and middleware layer for Next.js, Micro, Vercel, or Node.js http/http2

I use next-connect to use connect-like middlewares. A traditional API route handler in Next.js is like:

• Cusdis

  4 2,530 6.3 TypeScript

  lightweight, privacy-friendly alternative to Disqus.

The widget source code

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• dayjs

  97 45,745 6.9 JavaScript

  ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API

Then on the server side, we use dayjs to handle this offset:

• vite

  787 64,595 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

The SDK should be bundle in a single JS file. I choose Vite because it's fast, and it has a built in PostCSS support. In other words, I don't need to care about the bundler, the only plugin I use is rollup-plugin-svelte for compiling Svelte component:

• Svelte

  632 76,402 9.9 JavaScript

  Cybernetically enhanced web apps

  

Svetle is the best choice in this case. It doesn't come with a runtime and compiles the component into vanilla JavaScript.

• react-query

  190 27,869 9.1 TypeScript, JS

  Discontinued 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. [Moved to: https://github.com/TanStack/query]

  

react-query to handle HTTP request

• next-auth

  203 22,158 9.9 TypeScript

  Authentication for the Web.

  

next-auth is a authentication solution for Next.js. I follow the Prisma Adapter guide and integrate GitHub providers just in a minute! All I need to do is create a GitHub OAuth application and set up the next-auth provider in src/pages/api/[...nextauth].ts.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• chakra-ui

  344 36,578 9.0 MDX

  ⚡️ Simple, Modular & Accessible UI Components for your React Applications

  

chakra-ui to write usable and beautiful UI

Suggest a related project