{"id":15101332,"url":"https://github.com/jtiala/static-nextjs-contentful","last_synced_at":"2026-01-07T11:30:31.951Z","repository":{"id":224573601,"uuid":"763464663","full_name":"jtiala/static-nextjs-contentful","owner":"jtiala","description":"An example repository for a Next.js site using the app router, fetching data from Contentful, and generating TypeScript types for the content model.","archived":false,"fork":false,"pushed_at":"2024-04-11T07:28:30.000Z","size":298,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-01T20:45:13.234Z","etag":null,"topics":["contentful","github-pages","nextjs","typescript"],"latest_commit_sha":null,"homepage":"https://jtiala.github.io/static-nextjs-contentful/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jtiala.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-26T10:49:37.000Z","updated_at":"2024-02-26T22:52:58.000Z","dependencies_parsed_at":"2024-02-26T17:57:39.072Z","dependency_job_id":"bf166ee1-7ca0-4885-8f79-f357989963bf","html_url":"https://github.com/jtiala/static-nextjs-contentful","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"58309b04a1247643c5518ad236367cd1b65b1b81"},"previous_names":["jtiala/static-nextjs-contentful"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtiala%2Fstatic-nextjs-contentful","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtiala%2Fstatic-nextjs-contentful/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtiala%2Fstatic-nextjs-contentful/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtiala%2Fstatic-nextjs-contentful/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jtiala","download_url":"https://codeload.github.com/jtiala/static-nextjs-contentful/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245892043,"owners_count":20689436,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["contentful","github-pages","nextjs","typescript"],"created_at":"2024-09-25T18:20:39.461Z","updated_at":"2026-01-07T11:30:31.924Z","avatar_url":"https://github.com/jtiala.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js static export with app router and Contentful integration\n\nThis is an example repository for a static [Next.js](http://nextjs.org) site using the app router, fetching data from [Contentful](https://www.contentful.com), and generating TypeScript types for the content model. It also includes setups for local previewing of unpublished Contentful content and automatic site generation with GitHub Actions when content changes in Contentful.\n\nThe repo is inspired by [this great article](https://maxschmitt.me/posts/nextjs-contentful-typescript) by Max Schmitt but I've made some major changes.\n\n## Running the site locally\n\nIf you want to run this project yourself, you'll need to create a new Contentful space first. Also, create a new API key in `Settings -\u003e API keys -\u003e Add API key` and a personal access token in `Settings -\u003e CMA Tokens -\u003e Create personal access token`.\n\nNext, copy `.env.local.example` as `.env.local` and fill in your API keys from Contentful. If you want to include unpublished content in your local build, set `CONTENTFUL_CONTENT_PREVIEW=true`. `BASE_PATH` should be left empty for local builds.\n\nNow you can import the included content model in your Contentful space. Use the following script:\n\n```bash\nnpm run import-content-model contentful-content-model.json\n```\n\nThen, run the development server:\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Building the static export\n\nYou can build the static site with the `build` script:\n\n```bash\nnpm run build\n```\n\nTo preview the build locally, run:\n\n```bash\nnpm run start\n```\n\n## Generating types from the Contentful Content Model\n\nIf you make changes to the content model in Contentful, you can run the following command to generate updated TypeScript types.\n\n```bash\nnpm run generate-types\n```\n\n## Setting up local content preview in Contentful\n\nBecause the goal of this example repository is to have a static site without the Next.js server instance, we cannot use content preview in the deployed site. If you would rather use SSR and have the server instance running, you can follow [Max's article](https://maxschmitt.me/posts/nextjs-contentful-typescript) to set up content preview with Next.js's draft mode. In this example, we can preview the content using a locally running site. Of course, you could also deploy the preview site somewhere, but that setup is beyond our scope.\n\nIn Contentful, go to `Settings -\u003e Content preview`. Set the preview mode to `Preview in new tab`. Next, click `Add content preview`. Check all the content types and set URLs like this for each content type: `http://localhost:3000/[CONTENT_TYPE_ID in plural]/{entry.sys.id}`. Now you should be able to open unpublished content in localhost, just make sure that you have set the `CONTENTFUL_CONTENT_PREVIEW` as `true` and that the dev server or static build preview is running.\n\n## Triggering GitHub Actions workflow when content changes in Contentful\n\nYou'll probably want to rebuild the static site after you publish new content in Contentful. This can be achieved with a webhook.\n\n1. Follow [this guide](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) to create a new personal access token (classic) in GitHub. The token needs only `repo` access.\n2. Create a new webhook in Contentful: `Settings -\u003e Webhooks -\u003e Add Webhook`.\n\n   - Give the webhook a name of your choice.\n   - For the URL, use `POST https://api.github.com/repos/\u003cusername\u003e/\u003crepository\u003e/dispatches`.\n   - Select specific triggering events: `Publish`, `Unpublish`, and `Delete` for **Entry** events.\n   - Add two custom headers: `Accept: application/vnd.github.v3+json` and `User-Agent: Contentful Webhook`\n   - Add one secret header: `Authorization: Bearer \u003cGitHub Personal access token`\n   - Customize the webhook payload:\n\n     ```json\n     {\n       \"event_type\": \"publish-event\"\n     }\n     ```\n\n     Note: The event type must match the `repository_dispatch` in your GitHub workflow, in our case `.github/workflows/build-deploy.yml`.\n\n   - Leave other settings as default.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjtiala%2Fstatic-nextjs-contentful","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjtiala%2Fstatic-nextjs-contentful","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjtiala%2Fstatic-nextjs-contentful/lists"}