{"id":27890359,"url":"https://github.com/craftzing/datocms-plugin-nextjs-preview-multilingual","last_synced_at":"2025-07-03T02:36:26.844Z","repository":{"id":133331149,"uuid":"407092346","full_name":"craftzing/Datocms-plugin-nextjs-preview-multilingual","owner":"craftzing","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-04T13:04:05.000Z","size":630,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-05T10:57:12.238Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/craftzing.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,"zenodo":null}},"created_at":"2021-09-16T08:52:58.000Z","updated_at":"2022-07-04T13:04:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"faef556d-d8f8-4222-8b71-a8041294b8ff","html_url":"https://github.com/craftzing/Datocms-plugin-nextjs-preview-multilingual","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/craftzing/Datocms-plugin-nextjs-preview-multilingual","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzing%2FDatocms-plugin-nextjs-preview-multilingual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzing%2FDatocms-plugin-nextjs-preview-multilingual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzing%2FDatocms-plugin-nextjs-preview-multilingual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzing%2FDatocms-plugin-nextjs-preview-multilingual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/craftzing","download_url":"https://codeload.github.com/craftzing/Datocms-plugin-nextjs-preview-multilingual/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftzing%2FDatocms-plugin-nextjs-preview-multilingual/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263248334,"owners_count":23437011,"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":"2025-05-05T10:47:09.614Z","updated_at":"2025-07-03T02:36:26.836Z","avatar_url":"https://github.com/craftzing.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js Preview Links DatoCMS Plugin\n## Credits\nThis package is a mix of code from: https://github.com/DCKT/datocms-plugin-nextjs-preview and\nhttps://github.com/wbobeirne/datocms-plugin-nextjs-preview but seems like \na long time there was no progress so making this new clone that combines the two.\n\nThe original plugin by wbobeirne sadly does not support multilingual datocms sites and DCKT added support but the PR is not being merged.\nYou can use this as a private package.\n\nPlugin that adds quick links to preview \u0026 view your DatoCMS on a Next.js site.\nAssumes you have a preview implementation based off of the [official Next.js Preview Mode guide](https://nextjs.org/docs/advanced-features/preview-mode).\n\n## Installing the plugin\n\nSee [screenshot 1](https://capture.dropbox.com/TRqOyqz6Wh6ETLOl) and [screenshot 2](https://capture.dropbox.com/MLwgZAuhXb4kUATZ) for visual guide.\n\n- Go in DatoCMS to Settings =\u003e Plugins =\u003e Press the `+` button.\n- Choose \"Create Private Plugin\"\n- Fill in all fields:\n  - Title: `Preview`\n  - Entry Url: `https://craftzing.github.io/Datocms-plugin-nextjs-preview-multilingual/`\n  - Type of plugin: `Sidebar Widget`\n  - Field type: `JSON`\n  - Parameter definitions: `See package.json it's \"parameters\" object`\n\n## Configuration\n\nAfter installing the plugin, you'll need to configure the plugin settings like so:\n\n![Configuration screenshot](./docs/configuration.png)\n\nThen on each model you'd like to be able to preview, you'll need to add a JSON field, and under the \"Presentation\"\ntab, you'll want to select \"Next.js Preview Links\" as the \"Field editor\", and fill out the entity path for the\ngiven entity on your site. You can sub in any field on the entity using the $field_name, e.g. /blog/$slug or\n/product/$id.\n\n![JSON field screenshot](./docs/field.png)\n\n## Preview Links \n\nOnce you've configured the plugin and added the field to a model, you will be able to see it as a sidebar widget. \n\n![Plugin screenshot](./docs/preview.png)\n\nA blog post with a slug of `my-first-post` using the configuration from the example above would link to:\n\n* `https://my-next-site.com/api/preview?secret=some-super-secret-key\u0026slug=/blog/my-first-post` for the \"Preview\" link\n* `https://my-next-site.com/blog/my-first-post` for the \"View published\" link\n\nThe query params on the API preview path are not configurable, and are based on Next.js'\n[Preview Mode guide](https://nextjs.org/docs/advanced-features/preview-mode).\n\n## Disable Preview Links (optional)\n\nBy default, the Next.js preview mode persists through a browser session. However, this could have unintended consequences for the editor experience, such as subsequent \"View published page\" button clicks showing the preview page instead of the published page (because it's still the same browser session).\n\nTo work around this, you can create another [Next.js API route that clears the preview mode cookies and then redirects to the page slug](https://nextjs.org/docs/advanced-features/preview-mode#clear-the-preview-mode-cookies). An example `disable-preview.js` API route might look like this:\n\n```\nexport default function handler(req, res) {\n  // Clears the preview mode cookies.\n  // This function accepts no arguments.\n  res.clearPreviewData()\n\n  if (req.query.slug) {\n    // Redirect to the path from the fetched post\n    res.redirect(req.query.slug)\n  } else {\n    res.end('Preview mode disabled');\n  }\n}\n```\n\nOnce this API route is set up, you can specify the \"Disable preview API path\" in the plugin settings with its path, such as `/api/disable-preview`. This will cause the \"View published page\" button to go to that route first, with the slug attached as a parameter, and the API route should redirect to the intended page once preview mode has been disabled.\n\nThis way, the \"Preview\" button should always show the preview page, and the \"View published page\" should always show the published page (by forcing the preview cookies to be cleared every time).\n\n## Development\n\nIf you want to develop on this extension, the quickest way is to run `yarn addToProject`. That will walk you through\nsetting it up. If you have trouble going through that setup, you can manually install it by going to Settings \u003e Plugins,\nclicking the add button, and clicking \"create a private one\" in the lower right. Give it:\n\n* a name of your choosing\n* an entry point URL of `http://localhost:5000`\n* `Sidebar widget` as type of plugin\n* `JSON` as field types\n* Copy the JSON from `package.json`'s `parameters` object into the parameter defintions\n\nAfter that, you can just run `yarn start`, and it should be loading in the sidebar after you configure it with a model.\n\nThis project was largely based on the [Gatsby plugin](https://github.com/gatsby-inc/datocms-plugin-gatsby-cloud),\nand the [DatoCMS Todo List example plugin](https://github.com/datocms/plugins/tree/master/todo-list).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftzing%2Fdatocms-plugin-nextjs-preview-multilingual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcraftzing%2Fdatocms-plugin-nextjs-preview-multilingual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftzing%2Fdatocms-plugin-nextjs-preview-multilingual/lists"}