{"id":13479262,"url":"https://github.com/gregrickaby/nextjs-github-pages","last_synced_at":"2025-10-07T20:08:21.366Z","repository":{"id":36984233,"uuid":"248970821","full_name":"gregrickaby/nextjs-github-pages","owner":"gregrickaby","description":"🚀 Deploy a Next.js app to GitHub Pages via GitHub Actions","archived":false,"fork":false,"pushed_at":"2025-09-22T14:17:54.000Z","size":2481,"stargazers_count":548,"open_issues_count":0,"forks_count":74,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-09-22T16:22:31.162Z","etag":null,"topics":["github","github-actions","github-pages","nextjs","static-site"],"latest_commit_sha":null,"homepage":"https://gregrickaby.github.io/nextjs-github-pages/","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/gregrickaby.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"gregrickaby"}},"created_at":"2020-03-21T12:24:21.000Z","updated_at":"2025-09-22T14:14:45.000Z","dependencies_parsed_at":"2023-12-18T17:02:11.490Z","dependency_job_id":"11af0743-6e56-4995-acfa-a59391988d1a","html_url":"https://github.com/gregrickaby/nextjs-github-pages","commit_stats":null,"previous_names":[],"tags_count":3,"template":true,"template_full_name":null,"purl":"pkg:github/gregrickaby/nextjs-github-pages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregrickaby%2Fnextjs-github-pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregrickaby%2Fnextjs-github-pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregrickaby%2Fnextjs-github-pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregrickaby%2Fnextjs-github-pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gregrickaby","download_url":"https://codeload.github.com/gregrickaby/nextjs-github-pages/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregrickaby%2Fnextjs-github-pages/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278838434,"owners_count":26054720,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["github","github-actions","github-pages","nextjs","static-site"],"created_at":"2024-07-31T16:02:12.344Z","updated_at":"2025-10-07T20:08:21.350Z","avatar_url":"https://github.com/gregrickaby.png","language":"TypeScript","readme":"# Next.js GitHub Pages\n\nDeploy Next.js to GitHub Pages with GitHub Actions. [View the deployed app](https://gregrickaby.github.io/nextjs-github-pages/) 🚀\n\n\u003e ⚠️ Heads up! GitHub Pages _does not_ support serverless or edge functions. This means dynamic functionality will be disabled. See all the [unsupported features](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features).\n\n---\n\n## Configure Next.js\n\n### Next.js Config\n\nFirst, you need to configure Next.js to [deploy static exports](https://nextjs.org/docs/app/building-your-application/deploying/static-exports). This is required for GitHub Pages to work.\n\n1. Open the `next.config.ts` file\n2. Add the following:\n\n```typescript\nimport type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n  /**\n   * Enable static exports.\n   *\n   * @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports\n   */\n  output: \"export\",\n\n  /**\n   * Set base path. This is the slug of your GitHub repository.\n   *\n   * @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath\n   */\n  basePath: \"/nextjs-github-pages\",\n\n  /**\n   * Disable server-based image optimization. Next.js does not support\n   * dynamic features with static exports.\n   *\n   * @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized\n   */\n  images: {\n    unoptimized: true,\n  },\n};\n\nexport default nextConfig;\n```\n\n3. Save the `next.config.ts`\n\n4. Finally, place a `.nojekyll` file in the `/public` directory to disable GitHub Pages from trying to create a [Jekyll](https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/) website.\n\n```treeview\n.\n├── app/\n├── public/\n│   └── .nojekyll\n├── next.config.ts\n```\n\nPerfect! This is all you need to configure Next.js to deploy on GitHub Pages.\n\n### Add base path to `page.tsx`\n\nNext, you will need to add the base path to images in `page.tsx` file. This is required for the images to appear on GitHub Pages.\n\n1. Open `app/page.tsx`\n2. Find the `Image` components\n3. Add `/nextjs-github-pages/` (or the slug of your GitHub repository) to the `src` prop:\n\n```tsx\n\u003cImage\n  src=\"/nextjs-github-pages/vercel.svg\"\n  alt=\"Vercel Logo\"\n  className={styles.vercelLogo}\n  width={100}\n  height={24}\n  priority\n/\u003e\n```\n\n4. Save the `page.tsx` file\n\nLearn more by reading the official documentation [for basePath and images](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath#images).\n\n---\n\n## Configure GitHub Repository\n\nNow that Next.js is configured, you need to set up your GitHub repository to deploy to GitHub Pages.\n\n### Setup GitHub Action\n\nThis is where the magic happens! This [workflow file](https://github.com/gregrickaby/nextjs-github-pages/blob/main/.github/workflows/deploy.yml) will automatically build and deploy the app when you push to the `main` branch.\n\n1. Create `.github/workflows/deploy.yml` file\n2. Paste the contents of \u003chttps://github.com/gregrickaby/nextjs-github-pages/blob/main/.github/workflows/deploy.yml\u003e\n3. Save the `deploy.yml` file\n\n### Enable GitHub Pages\n\n1. Go to your repository's **Settings** tab\n2. Click \"Pages\" in the sidebar\n3. Under \"Build and Deployment\", select \"GitHub Actions\" as the source:\n\n![screenshot of github pages settings](https://dl.dropboxusercontent.com/s/vf74zv2wcepnt9w/Screenshot%202025-02-03%20at%2021.10.06.png?dl=0)\n\n### Push to GitHub\n\nNow that everything is configured, you can commit your code and push to GitHub. This will trigger the GitHub Action workflow and deploy your app to GitHub Pages.\n\n```bash\ngit add . \u0026\u0026 git commit -m \"initial commit\" \u0026\u0026 git push\n```\n\nYou should see your site deployed to GitHub Pages in a few minutes. 🚀\n\n---\n\n## Wrap up\n\nThanks for reading and I hope this helps. If you noticed someting wrong, please [open an issue](https://github.com/gregrickaby/nextjs-github-pages/issues). Cheers! 🍻\n\n---\n","funding_links":["https://github.com/sponsors/gregrickaby"],"categories":["TypeScript","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregrickaby%2Fnextjs-github-pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregrickaby%2Fnextjs-github-pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregrickaby%2Fnextjs-github-pages/lists"}