{"id":15506142,"url":"https://github.com/simply007/kontent-sample-app-next-js-2","last_synced_at":"2025-06-11T03:33:15.672Z","repository":{"id":94605368,"uuid":"329554898","full_name":"Simply007/kontent-sample-app-next-js-2","owner":"Simply007","description":null,"archived":false,"fork":false,"pushed_at":"2021-01-14T08:38:02.000Z","size":513,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T22:28:11.445Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"kontent-sample-app-next-js.chrastinaondra.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Simply007.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-01-14T08:37:54.000Z","updated_at":"2021-01-14T08:39:12.000Z","dependencies_parsed_at":"2023-06-25T23:41:08.767Z","dependency_job_id":null,"html_url":"https://github.com/Simply007/kontent-sample-app-next-js-2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fkontent-sample-app-next-js-2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fkontent-sample-app-next-js-2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fkontent-sample-app-next-js-2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fkontent-sample-app-next-js-2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Simply007","download_url":"https://codeload.github.com/Simply007/kontent-sample-app-next-js-2/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Simply007%2Fkontent-sample-app-next-js-2/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259191971,"owners_count":22819409,"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":[],"created_at":"2024-10-02T09:25:47.896Z","updated_at":"2025-06-11T03:33:15.658Z","avatar_url":"https://github.com/Simply007.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A statically generated blog example using Next.js and Kontent\n\n**CREATED USING \u003chttps://github.com/vercel/next.js/tree/canary/examples/cms-kontent\u003e**\n\nThis example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Kentico Kontent](https://kontent.ai) as the data source.\n\n## Demo\n\n[https://next-blog-kontent.vercel.app/](https://next-blog-kontent.vercel.app/)\n\n## Deploy your own\n\nOnce you have access to [the environment variables you'll need](#step-3-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example):\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/Simply007/kontent-sample-app-next-js\u0026project-name=kontent-sample-app-next-js\u0026repository-name=kontent-sample-app-next-js\u0026env=KONTENT_PROJECT_ID,KONTENT_PREVIEW_API_KEY,KONTENT_PREVIEW_SECRET\u0026envDescription=Required%20to%20connect%20the%20app%20with%20Kontent\u0026envLink=https://github.com/Simply007/kontent-sample-app-next-js%23step-3-set-up-environment-variables)\n\n## How to use\n\nExecute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:\n\n```bash\nnpx create-next-app --example cms-kontent cms-kontent-app\n# or\nyarn create next-app --example cms-kontent cms-kontent-app\n```\n\n## Configuration\n\n### Step 1. Create an account on Kontent\n\nFirst, [create an account on Kontent.ai](https://app.kontent.ai/sign-up?utm_source=nextjs_docs_example\u0026utm_medium=devrel\u0026utm_campaign=extended_trial).\n\n\u003e The link above will provide you with the 90-days trial. Once you finish the trial, or even during the trial period, you could switch to the [**developer plan**](https://kontent.ai/developer-plan) which is **free of charge** and offers all the features you'll need to test out the example capabilities.\n\nAfter signing up, [create an empty project](https://docs.kontent.ai/tutorials/set-up-kontent/projects/manage-projects#a-creating-projects).\n\n### Step 2. Create the content models and fill them with data\n\nThe [content model](https://docs.kontent.ai/tutorials/set-up-kontent/content-modeling/what-is-content-modeling) defines the data structures of your application/websites. The structures are flexible and you can tailor them to your needs.\n\nFor this example you need to create a content model that defines an `author` and a `post` content type. **You can import these automatically or by doing it manually** to familiarize yourself with the Kontent user interface.\n\nTo import the content models with their data follow the next steps:\n\n1. Enter [Kontent application](https://app.kontent.ai)\n1. Go to \"Project Settings\", select API keys\n1. Activate Management API\n1. Copy `Project ID` and `Management API` key\n1. Install [Kontent Backup Manager](https://github.com/Kentico/kontent-backup-manager-js) and import data to newly created project from kontent-backup.zip file (place appropriate values for apiKey and projectId arguments):\n\n   ```sh\n   npm i -g @kentico/kontent-backup-manager\n   kbm --action=restore --apiKey=\u003cManagement API key\u003e --projectId=\u003cProject ID\u003e --zipFilename=kontent-backup\n   ```\n\n   \u003e **💡 Alternatively, you can use the [Template Manager UI](https://kentico.github.io/kontent-template-manager/import-from-file) for importing the content.**\n\n1. Go to your Kontent project and publish all the imported items.\n   \u003e You could deactivate Management API key, it is not necessary any more.\n\n### Step 2.1. Optionally create the content models manually\n\nYou can safely ignore this step if you already imported the content models in Step 2.\n\n#### Create an `Author` content type\n\nFrom your Kontent project, go to **Content models** and add a new `Content type`:\n\n\u003e you don't have to modify the element configuration unless specified\n\n- Content type name: `Author`\n- Add the following content elements\n  - `Name` - **Text** element\n  - `Picture` - **Asset** element - configure to allow to select `At most 1` asset and `Limit file types` only to `Adjustable images`\n\nSave the content type and continue.\n\nThe content type should look like this:\n\n![Content type Author](./docs/author-content-type.png)\n\n#### Create a `Post` content type\n\nFrom your Kontent project, go to **Content models** and add a new content type:\n\n\u003e you don't have to modify the element configuration unless specified\n\n- Content type name: `Post`\n- Add the following content elements\n  - `Title` - **Text** element\n  - `Date` - **Date \u0026 time** element\n  - `Excerpt` - **Text** element\n  - `Content` - **Rich Text** element\n  - `Cover Image` - **Asset Text** element - configure to allow to select `At most 1` asset and `Limit file types` only to `Adjustable images` - `Content` - `Slug` - **URL slug** element - auto-generated from `Title` element\n  - `Author` - **Linked items** element - configure to accept `Exactly 1` item of type `Author`\n\nSave the content type and continue.\n\nThe content type should look like this:\n\n![Content type Author](./docs/post-content-type.png)\n\n#### Fill content models with data\n\nGo to `Content \u0026 Assets` section in your project and click `Create new` on the `Content` tab and select `Author` content type.\n\n- You just need **1 author item** first.\n- Use dummy data for his name.\n- For the image, you can download one from [Unsplash](https://unsplash.com/).\n\nNext, create another item based on **Post** content type:\n\n- It's recommend to create at least **2 post items**.\n- Use dummy data for the text.\n- For images, you can download them from [Unsplash](https://unsplash.com/).\n- Pick the **author** you created earlier.\n\n**Important:** For each item, you need to click on **Publish**. If not, the entry will be in draft workflow step.\n\n![Published post item overview](./docs/publish-post-overview.png)\n\n### Step 3. Set up environment variables\n\nCopy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):\n\n```bash\ncp .env.local.example .env.local\n```\n\nThen set each variable on `.env.local` using the keys `Project settings` \u003e `API keys`:\n\n- `KONTENT_PROJECT_ID` - Should be the Project ID in `Project settings` \u003e `API keys`.\n- `KONTENT_PREVIEW_API_KEY` - One of the Preview API keys in `Project settings` \u003e `API keys`.\n- `KONTENT_PREVIEW_SECRET` - Can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).\n\n### Step 4. Run Next.js in development mode\n\n```bash\nnpm install\nnpm run dev\n\n# or\n\nyarn\nyarn dev\n```\n\nYour blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).\n\n### Step 5. Try preview mode\n\nIn your Kontent project, go to **Project Settings \u003e Preview URLs** and set a new preview URL for the `Post` content type to:\n\n```plain\nhttp://localhost:3000/api/preview?secret=\u003cKONTENT_PREVIEW_SECRET\u003e\u0026slug={URLslug}\n```\n\nReplace `\u003cKONTENT_PREVIEW_SECRET\u003e` with its respective value in `.env.local`:\n\n![Preview URL setup](./docs/preview-URLs-setup.png)\n\nOnce saved, go to one of the posts you've created and:\n\n- Create a new version of the post\n- **Update the title**. For example, you can add `[Draft]` in front of the title.\n  \u003e Mind the title also regenerates the URL slug, if you want to change any other field that does not influence URL slug, feel free to do so.\n- **Do not** publish it. By doing this, the post will be in draft workflow step.\n- On the menu, you will see the **Preview** button. Click on it!\n\n![Post preview button](./docs/post-preview-button.png).\n\nYou will now be able to see the updated title. To exit preview mode, you can click on **Click here to exit preview mode** at the top of the page.\n\n### Step 6. Deploy on Vercel\n\nYou can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).\n\n#### Deploy Your Local Project\n\nTo deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example).\n\n**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.\n\n#### Deploy from Our Template\n\nAlternatively, you can deploy using our template by clicking on the Deploy button below.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/Simply007/kontent-sample-app-next-js\u0026project-name=kontent-sample-app-next-js\u0026repository-name=kontent-sample-app-next-js\u0026env=KONTENT_PROJECT_ID,KONTENT_PREVIEW_API_KEY,KONTENT_PREVIEW_SECRET\u0026envDescription=Required%20to%20connect%20the%20app%20with%20Kontent\u0026envLink=https://github.com/Simply007/kontent-sample-app-next-js%23step-3-set-up-environment-variables)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimply007%2Fkontent-sample-app-next-js-2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimply007%2Fkontent-sample-app-next-js-2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimply007%2Fkontent-sample-app-next-js-2/lists"}