How to Find and Use Next.js Examples on GitHub

Use the official Next.js documentation and Learn repositories as your starting point, then initialize an example with create-next-app --example or clone it and follow its README. Before changing code, determine whether it uses the App Router (app) or Pages Router (pages), inspect its dependencies and configuration, and verify it locally.

This workflow helps you find an example that matches your feature, understand its structure, and avoid copying code that depends on a different Next.js version or deployment model.

1. Start with official Next.js examples

The official documentation separates the newer App Router from the original Pages Router, which remains supported. The [App Router documentation](https://nextjs.org/docs/app) covers the newer routing model, while the [Pages Router documentation](https://nextjs.org/docs/pages) covers the original system. The [Learn tutorials](https://nextjs.org/learn) provide step-by-step projects and starter repositories.

Use the documentation search and GitHub search together:

Search the Next.js docs for the feature you need: routing, data fetching, authentication, styling, image optimization, or deployment.
Open the linked Learn tutorial or official example repository.
Read the repository README before copying files.
Check the example’s package manifest and lockfile for its required Next.js version and package manager.

2. Search GitHub effectively

GitHub searches are more useful when they describe the behavior you need instead of only using the word “Next.js.” Try combinations such as:

# Examples to try in GitHub's search box
nextjs app router authentication
nextjs pages router api routes
nextjs server actions typescript
nextjs image optimization
nextjs dashboard app router

When a result looks useful, check these signals before adopting it:

What to inspect	Why it matters
Router directories	Shows whether the code follows App Router or Pages Router conventions.
`package.json`	Reveals framework version, scripts, dependencies, and package manager clues.
Lockfile	Use the matching package manager: `pnpm-lock.yaml`, `yarn.lock`, or `package-lock.json`.
README and setup files	Lists environment variables, databases, external services, and startup commands.
`next.config.*`	Can change image handling, redirects, rewrites, headers, output mode, and experimental behavior.
`.env.example`	Shows which configuration values must exist locally. Never commit real secrets.
License and dependency history	Determines whether reuse is permitted and whether dependencies need review.

The official dashboard tutorial is a useful orientation: it separates route code, utility functions, UI components, public assets, and configuration. Treat that layout as a guide rather than a rule for every repository.

3. Tell App Router from Pages Router

Look at the top-level directories first.

Router	Typical evidence	Route definition
App Router	`app/` containing `page.` and often `layout.`	Directories represent URL segments; special files such as `page` and `layout` define UI and shared shells.
Pages Router	`pages/` containing route files	Files under `pages` map directly to routes.

An App Router project requires a root layout containing html and body. Pages Router projects commonly use files such as pages/index.js and API routes under pages/api. Do not move a component between routers without checking its data-fetching and rendering APIs.

4. Create a project from an official or GitHub example

The current create-next-app reference accepts either an official example name or a public GitHub repository URL. The general pattern is:

pnpm create next-app --example [example-name] [your-project-name]

For a public repository, pass its URL:

pnpm create next-app --example https://github.com/OWNER/REPO your-project-name

The CLI also documents --example-path for selecting a path within an example, --skip-install to create files without installing dependencies, and --disable-git to prevent Git initialization. Run the current help output before relying on a flag:

pnpm create next-app@latest --help

A concrete Pages Router tutorial command is:

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Example repository paths can change. Confirm the current path in the linked tutorial or repository before publishing scripts in automation.

5. Clone an example manually

Cloning is useful when the repository has several directories, a detailed README, or setup steps that the CLI cannot infer.

git clone https://github.com/OWNER/REPO.git my-next-app
cd my-next-app

# Use the package manager indicated by the lockfile
npm install
npm run dev

For a pnpm project:

corepack enable
pnpm install
pnpm dev

For a Yarn project:

corepack enable
yarn install
yarn dev

Open the local URL printed by the development server. Follow the repository’s own script names if they differ from dev.

6. Make your first change safely

Create a branch or keep an untouched copy of the starter.
Run the example before editing it, so setup failures are separate from code changes.
Change one visible detail, such as a heading or color.
Use the route structure to find the component that controls that detail.
Check the browser, terminal, and server logs after each change.
Compare unfamiliar APIs with the current App Router or Pages Router documentation.

For App Router code, check whether a component is a Server Component or has a 'use client' directive before adding browser-only APIs. For Pages Router code, inspect data-fetching methods and API routes before moving them into an app directory.

7. Evaluate examples before using them in a real project

Use this checklist before adapting a repository:

Feature match: Does it demonstrate the exact behavior you need?
Router match: Is it compatible with your intended App Router or Pages Router architecture?
Version match: Does its Next.js and React version fit your project?
Setup cost: Does it require a database, authentication provider, API keys, or other services?
Build behavior: Does it use server rendering, dynamic routes, middleware, or image optimization?
License: Does the repository license permit your intended use?
Dependency health: Review dependency versions, recent changes, open issues, and security advisories yourself.
Deployment target: Does the project require a Node.js server, Docker, or platform adapter?

The research for this guide did not verify the maintenance, security, or production readiness of individual third-party repositories. Treat those as review tasks rather than assumptions.

8. Understand deployment implications

The official deployment documentation describes Node.js server deployments, Docker containers, static export, and platform adapters. Node.js and Docker support all Next.js features according to that documentation. Static export has limited feature support, so server-dependent features may need a different deployment mode. Check the current [deployment guide](https://nextjs.org/docs/app/building-your-application/deploying) for platform-specific details before selecting a target.

Deployment choice	Check before adopting an example
Node.js server	Confirm the start command, Node version, environment variables, and runtime assumptions.
Docker	Read the Dockerfile, exposed port, build arguments, and production output settings.
Static export	Verify that the example does not require server rendering, API routes, middleware, or other unsupported features.
Platform adapter	Check the adapter’s current support for the framework features used by the example.

9. Capture a running example for documentation or review

If you need a visual record of an example, the do-it-yourself method is to run the project locally, expose it through an accessible URL when necessary, and use a browser automation tool or your browser’s print and screenshot features. For repeatable captures, define the viewport, wait for the route to finish loading, and keep the URL and commit hash with the image.

Or skip the browser setup

ScreenshotNeo captures a URL with one GET request. Its API accepts full-page captures, custom viewports, device presets, waits, CSS selectors, and other options; see the API documentation for the current parameter names.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://github.com/vercel/next-learn -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://github.com/vercel/next-learn"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://github.com/vercel/next-learn'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. ScreenshotNeo also provides an MCP server for AI agents, including Claude and Cursor, with take_screenshot, get_page_info, and capture_pdf tools. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000.

Create a free ScreenshotNeo account to capture your examples without setting up browser automation.

10. Troubleshooting

Symptom	Likely cause	Fix
`create-next-app` cannot find the example	The repository URL or subdirectory changed, is private, or is not a supported public example.	Open the repository in a browser, confirm the current path, and retry with the documented URL.
Dependencies fail to install	Wrong package manager, incompatible Node version, or stale lockfile.	Use the package manager matching the lockfile, check the README’s Node requirement, and install from a clean checkout.
The dev command is missing	The repository uses a different script name or is not a complete app root.	Inspect `package.json` scripts and change into the directory that contains it.
Environment variable errors	A required service key or URL is absent.	Copy the example environment file, fill local values, and restart the dev server. Keep secrets out of Git.
A route returns 404	The URL does not match the App Router directory or Pages Router filename.	Map the URL segment to the corresponding `app` or `pages` path and check route-specific files.
Browser APIs fail during rendering	Server-rendered code is using `window`, `document`, or another browser-only API.	In App Router code, move that logic into a client component; in Pages Router code, run it after mount or guard it appropriately.
Static deployment breaks features	Static export cannot provide a server-dependent capability used by the example.	Choose a Node.js or Docker deployment, or redesign the feature for static output.
A screenshot is blank or incomplete	The page is still loading, requires interaction, or is blocked by a bot check.	Wait for a selector or network idle, provide required headers or cookies, and inspect the page verdict and response headers.

11. Performance, reliability, and cost notes

Prefer the smallest example that demonstrates your target feature; fewer dependencies reduce install and build time.
Keep the original commit or branch so you can compare your changes with the known-working starter.
Pin or record the framework and runtime versions used to validate the example.
For screenshots, wait for a meaningful selector instead of relying only on a fixed delay. Use caching when the source page is unchanged and choose a TTL that fits your freshness needs.
For many URLs, ScreenshotNeo supports bulk capture of up to 100 URLs per call and asynchronous jobs with signed webhooks.
ScreenshotNeo’s only-clean-shots billing model means failed loads, blank pages, bot checks, timeouts, and cache hits cost nothing; inspect X-Page-Verdict and X-Billed in your logging.

FAQ

Is App Router replacing Pages Router immediately?

No. App Router is the newer system, while Pages Router remains supported. Choose based on the example and the architecture you need.

Can I use a private GitHub repository with `--example`?

The documented URL form is for a public GitHub example. For private code, clone it with your normal Git credentials and follow its setup instructions.

Should I copy an entire example into an existing app?

Usually start by running it separately, identify the smallest files that implement the behavior, and port those pieces while reconciling versions, configuration, and router conventions.

What should I record when evaluating an example?

Record the repository URL, commit, Next.js and Node versions, package manager, required environment variables, deployment mode, and any external services.

Can ScreenshotNeo capture a local `localhost` URL?

The API captures an accessible URL. If your app is local, expose it through a suitable temporary or deployed URL before requesting a capture.