rayan/next.js
1
0
Fork 0
Code Issues Pull Requests Actions 12 Packages Projects Releases Wiki Activity

first commit
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Details
Test examples / Test Examples (22) (push) Has been cancelled
Details
Lock Threads / action (push) Has been cancelled
Details
Trigger Release / start (push) Has been cancelled
Details
Stale issue handler / stale (push) Has been cancelled
Details
Update Font Data / create-pull-request (push) Has been cancelled
Details
build-and-deploy / deploy-target (push) Has been cancelled
Details
build-and-deploy / build (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
Details
build-and-deploy / build-wasm (web) (push) Has been cancelled
Details
build-and-deploy / Deploy preview tarball (push) Has been cancelled
Details
build-and-deploy / Potentially publish release (push) Has been cancelled
Details
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
Details
build-and-deploy / Deploy examples (push) Has been cancelled
Details
build-and-deploy / thank you, build (push) Has been cancelled
Details
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Details
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Details
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Details
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Details
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Details
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Details
Update React / create-pull-request (push) Has been cancelled
Details
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Details
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Arian Tron
2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/with-segment-analytics/.env.local.example Normal file
View File

@@ -0,0 +1,2 @@
// This write key is associated with https://segment.com/nextjs-example/sources/nextjs.
NEXT_PUBLIC_SEGMENT_WRITE_KEY=NPsk1GimHq09s7egCUlv7D0tqtUAU5wa

40
examples/with-segment-analytics/.gitignore vendored Normal file
View File

@@ -0,0 +1,40 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

25
examples/with-segment-analytics/README.md Normal file
View File

@@ -0,0 +1,25 @@
# With Segment Analytics
This example shows how to use Next.js along with [Segment Analytics](https://segment.com) using [segmentio/analytics-next](https://github.com/segmentio/analytics-next). The main app [layout](https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics/app/layout.tsx) includes a Client Component (analytics.tsx)[(https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics/components/analytics.tsx)] which loads Segment and also exports the `analytics` object which can be imported and used to call the [Track API](https://segment.com/docs/connections/spec/track/) on user actions (Refer to [`contact.tsx`](https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics/app/contact/page.tsx)).
## Deploy your own
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-segment-analytics&project-name=with-segment-analytics&repository-name=with-segment-analytics)
## How to use
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
```bash
npx create-next-app --example with-segment-analytics with-segment-analytics-app
```
```bash
yarn create next-app --example with-segment-analytics with-segment-analytics-app
```
```bash
pnpm create next-app --example with-segment-analytics with-segment-analytics-app
```
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

11
examples/with-segment-analytics/app/about/page.tsx Normal file
View File

@@ -0,0 +1,11 @@
export const metadata = {
title: "About",
};
export default function About() {
return (
<div>
<h1>This is the About page</h1>
</div>
);
}

14
examples/with-segment-analytics/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,14 @@
import Form from "@/components/form";
export const metadata = {
title: "Contact",
};
export default function Contact() {
return (
<div>
<h1>This is the Contact page</h1>
<Form />
</div>
);
}

21
examples/with-segment-analytics/app/layout.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { Inter } from "next/font/google";
import Header from "@/components/header";
import Analytics from "@/components/analytics";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body className={inter.className}>
<Header />
{children}
</body>
<Analytics />
</html>
);
}

11
examples/with-segment-analytics/app/page.tsx Normal file
View File

@@ -0,0 +1,11 @@
export const metadata = {
title: "Home",
};
export default function Home() {
return (
<div>
<h1>This is the Home page</h1>
</div>
);
}

16
examples/with-segment-analytics/components/analytics.tsx Normal file
View File

@@ -0,0 +1,16 @@
"use client";
import { useEffect } from "react";
import { usePathname, useSearchParams } from "next/navigation";
import { analytics } from "@/lib/segment";
export default function Analytics() {
const pathname = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
analytics.page();
}, [pathname, searchParams]);
return null;
}

48
examples/with-segment-analytics/components/form.tsx Normal file
View File

@@ -0,0 +1,48 @@
"use client";
import { useState } from "react";
import { analytics } from "@/lib/segment";
export default function Form() {
const [message, setMessage] = useState("");
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
analytics.track("Form Submitted", {
message,
});
setMessage("");
};
return (
<>
<form onSubmit={handleSubmit}>
<label>
<span>Message:</span>
<textarea
onChange={(e) => setMessage(e.target.value)}
value={message}
/>
</label>
<button type="submit">submit</button>
</form>
<style jsx>{`
label span {
display: block;
margin-bottom: 12px;
}
textarea {
min-width: 300px;
min-height: 120px;
}
button {
margin-top: 12px;
display: block;
}
`}</style>
</>
);
}

21
examples/with-segment-analytics/components/header.tsx Normal file
View File

@@ -0,0 +1,21 @@
import Link from "next/link";
export default function Header() {
return (
<header>
<nav>
<ul>
<li>
<Link href="/">Home</Link>
</li>
<li>
<Link href="/about">About</Link>
</li>
<li>
<Link href="/contact">Contact</Link>
</li>
</ul>
</nav>
</header>
);
}

5
examples/with-segment-analytics/lib/segment.ts Normal file
View File

@@ -0,0 +1,5 @@
import { AnalyticsBrowser } from "@segment/analytics-next";
export const analytics = AnalyticsBrowser.load({
writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY!,
});

19
examples/with-segment-analytics/package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"private": true,
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@segment/analytics-next": "1.53.0",
"next": "latest",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "20.4.0",
"@types/react": "18.2.8",
"typescript": "5.1.6"
}
}

28
examples/with-segment-analytics/tsconfig.json Normal file
View File

@@ -0,0 +1,28 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}