A no-nonsense hit count badge generator built with Next.js and FaunaDB.
To use the generated hit count badge, add the following snippet to your readme file.
![Hit count](https://hits.vercel.app/USER/REPO.svg)
# Install dependencies
npm install
# Run local development server on https://localhost:3000/
npm run dev
-
Firstly, you'll need to set up the back-end database to store the hit counts.
-
Head over to https://fauna.org and create an account.
-
Create a database (Select US as the region - if your region of choice is different, you may need to change the db connection domain over at ./pages/api/[...path].js).
-
Within the created database, create a collection.
-
Next, click
Indexes
on the sidebar and add an index.- Name:
by_path
- Terms:
data.path
- Values:
data.count
- Unique: Checked
- Serialized: Checked
- Name:
-
After that, click
Functions
and add a function with the namegetHits
. For the function body, copy and paste the below function:Query( Lambda( "path", Let( { match: Match(Index("by_path"), Var("path")) }, If( Exists(Var("match")), Let( { doc: Get(Var("match")) }, Update(Select("ref", Var("doc")), { data: { count: Add(Select(["data", "count"], Var("doc")), 1) } }) ), Create(Collection("hitcount"), { data: { path: Var("path"), count: 1 } }) ) ) ) )
This function takes a single argument (the path), and adds it to the database if it does not exist, or increments the count if it does.
-
Finally, hit
Security
in the sidebar and generate a server secret.
-
-
Set up the front-end:
To deploy the Next.js app, you can use a platform like Netlify or Vercel. Add the FaunaDB server secret as an environment variable called
FAUNADB_SECRET
.
MIT