We need a few API functions to handle GitHub authorization and Preview Mode. With Next.js, any functions in the
pages/api directory are mapped to
/api/* endpoints. Files in this directory are treated as API endpoints instead of pages.
If you see a 'dummy'
hello.jsfile in the
pages/apidirectory, feel free to delete it.
We'll add some files in this directory to connect the API helpers to our project. Using the code generator Hygen, we've created a few scripts to help generate the required files for this step. From the terminal, run:
npx hygen-add https://github.com/dwalkr/hygen-next-tinacms-github npx hygen next-tinacms-github bootstrap --format ts
Note: if your pages directory is not in the root, you will need to supply a
--dir [subDir]option for this last script.
# Example setting sub directory option npx hygen next-tinacms-github bootstrap --format ts --dir src
You should see a new
_templates directory has been created and a few API files have been set up in
preview.ts: Contains an API function to enter Preview Mode and set up preview data.
reset-preview.ts: Contains an API function to exit Preview Mode.
proxy-github.ts: Proxies requests to the GitHub API, attaching the user's OAuth token to the request.
create-github-access-token.ts: Creates a function to handle authorization with the GitHub OAuth API.
After these files are created, you can delete the