{"id":15819712,"url":"https://github.com/florianrappl/piral-nextjs-sample","last_synced_at":"2026-04-28T21:31:43.164Z","repository":{"id":147576393,"uuid":"243221829","full_name":"FlorianRappl/piral-nextjs-sample","owner":"FlorianRappl","description":"Migrating an existing Next.js application to be used in a Piral instance as a pilet. :package:","archived":false,"fork":false,"pushed_at":"2020-02-26T09:34:20.000Z","size":273,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-06T06:42:48.771Z","etag":null,"topics":["demo","microfrontend","microfrontends","nextjs","pilet","piral","sample","tutorial"],"latest_commit_sha":null,"homepage":"https://piral.io","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/FlorianRappl.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":"2020-02-26T09:22:35.000Z","updated_at":"2022-08-14T03:30:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"f2d26be2-1639-4e21-897d-ef76d72bc923","html_url":"https://github.com/FlorianRappl/piral-nextjs-sample","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/FlorianRappl%2Fpiral-nextjs-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianRappl%2Fpiral-nextjs-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianRappl%2Fpiral-nextjs-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlorianRappl%2Fpiral-nextjs-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FlorianRappl","download_url":"https://codeload.github.com/FlorianRappl/piral-nextjs-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246591782,"owners_count":20801986,"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":["demo","microfrontend","microfrontends","nextjs","pilet","piral","sample","tutorial"],"created_at":"2024-10-05T06:42:51.828Z","updated_at":"2026-04-28T21:31:38.145Z","avatar_url":"https://github.com/FlorianRappl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Piral Next.js Example\n\nThis example shows how an existing application using Next.js could be changed to be a pilet.\n\nThe application is still capable of running as a Next.js app, while also being buildable as a pilet.\n\n**Remark**: This approach is valid for a single Next.js pilet. If you have multiple Next.js applications that you want to run in the same Piral instance then sharing the `next/head` etc. components from the app shell would be recommended.\n\n## Required Changes\n\nWe've installed the `piral-cli` and the respective app shell (in this case `sample-piral`). We've added the necessary fields to the `package.json`.\n\n### `package.json`\n\nMost notably we did add:\n\n```json\n  \"piral\": {\n    \"name\": \"sample-piral\",\n    \"externals\": [\n      \"sample-piral\",\n      \"react\",\n      \"react-router-dom\"\n    ]\n  },\n```\n\nTo improve the experience even more we've also declared peer dependencies.\n\n```json\n  \"peerDependencies\": {\n    \"react\": \"*\",\n    \"react-router-dom\": \"*\",\n    \"sample-piral\": \"*\"\n  },\n```\n\nFinally, it makes sense to also add scripts for building the pilet.\n\n```json\n  \"scripts\": {\n    \"dev\": \"next\",\n    \"build\": \"next build\",\n    \"build-pilet\": \"pilet build\",\n    \"debug-pilet\": \"pilet debug\",\n    \"start\": \"next start\"\n  },\n```\n\n### `src/index.js`\n\nA new `src/index.js` file was added. This one performs all the registrations.\n\nWe've also added a tile to link to `/sample` for demonstration purposes.\n\n### Reference React\n\nEvery source file did not reference `React` explicitly. This is, however, usually necessary. Potentially, a `.babelrc` could be used for this. In this example we've just added\n\n```js\nimport * as React from 'react';\n```\n\non top of each file.\n\n### React Router\n\nSince the next router is not compatible with the React router I've also made a slight change here. I've added an `alias` field to the `package.json`. This tells Parcel to resolve some package differently. In our case `next/link` will be resolved to `./components/Link.js`. This element will also prefix all used links with \"/sample\" such that `/contact` would be `/sample/contact`.\n\n```json\n  \"alias\": {\n    \"next/link\": \"./components/Link.js\"\n  },\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorianrappl%2Fpiral-nextjs-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflorianrappl%2Fpiral-nextjs-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorianrappl%2Fpiral-nextjs-sample/lists"}