Getting Started

Installation

Inside your Next.js project directory, run the following:

npm install feelstatic

Feelstatic comes with type definitions for TypeScript. If you are using TypeScript, you don't need to install any additional packages.

Quick Start

Add api route

Start out by creating a file called [[...fst]].ts in pages/api/feelstatic. This contains the dynamic API route handler for Feelstatic.

pages/api/feelstatic/[[...fst]].ts

import { FeelstaticApi } from 'feelstatic/api';
import { join } from 'path';
 
const ROOT_PATH = process.cwd();
 
export default FeelstaticApi({
  paths: {
    root: ROOT_PATH,
    pages: [join(ROOT_PATH, '/app'), join(ROOT_PATH, '/pages')],
    components: [join(ROOT_PATH, '/app'), join(ROOT_PATH, '/components')],
    images: join(ROOT_PATH, '/public/images'),
  },
});

It's important to specify and join the paths in this instance because when Next.js is built on Vercel, it only traces files that are necessary for the specific handler - in this case, the Feelstatic API. If the paths for your json and image files are not specified, Feelstatic will not be able to retrieve and display them.

Add page route

Create a page.tsx file in app/feelstatic/[[...fst]]. This includes the Feelstatic application and makes it available on the website.

app/feelstatic/[[...fst]]/page.tsx

import { FeelstaticPage } from 'feelstatic';
 
export default FeelstaticPage;

Set environment variables

Three environment variables must be set.

FST_GITHUB_OWNER

Set this to the owner/person/organization of the github repository (e.g. mikkeldamm)

FST_GITHUB_REPO

Set this to the repository name (e.g. feelstatic)

FST_GITHUB_ACCESS_TOKEN

Get your github access token (opens in a new tab) and set it here.

💡

You should only allow the token to access the repository that you are working with, and only choose the following permissions:

Read access to commit statuses and metadata
Read and Write access to content

Remember to set the environment variables in Vercel before deploying

Create your first editable page

Now you can start adding editable pages. This is done by adding a page.json file beside any page.tsx files in the app folder.

Here is a small simple example of a page

app/page.json

{
  "hero": {
    "title": "Wow, is it so simple?!"
  }
}

Now you can import that page.json file in your page.tsx file and use its fields.

app/page.tsx

import page from './page.json';
 
export default function Home() {
  return (
    <main>
      <h1>{page.hero.title}</h1>
    </main>
  );
}

Example

I will try to make as many examples as possible under the page examples, but for now you can look at the dev (opens in a new tab) site in the package folder.

Introduction Pages