Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated with-plausible example to utilize the app router. #73255

Merged
merged 10 commits into from
Nov 28, 2024
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import Page from "../components/Page";

export default function About() {
return (
<Page>
<div>
<h1>This is the About page</h1>
</Page>
</div>
);
}
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { useState } from "react";
import Page from "../components/Page";
"use client";

import { FormEvent, useState } from "react";
import { usePlausible } from "next-plausible";

export default function Contact() {
const [message, setMessage] = useState("");
const plausible = usePlausible();

const handleSubmit = (e) => {
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();

plausible("customEventName", {
Expand All @@ -16,23 +17,19 @@ export default function Contact() {
});

// your own submit logic

setMessage("");
};

return (
<Page>
<div>
<h1>This is the Contact page</h1>
<form onSubmit={handleSubmit}>
<label>
<span>Message:</span>
<textarea
onChange={(e) => setMessage(e.target.value)}
value={message}
/>
<textarea name="message" />
</label>
<button type="submit">submit</button>
</form>
</Page>
</div>
);
}
28 changes: 28 additions & 0 deletions examples/with-plausible/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import PlausibleProvider from "next-plausible";
import Header from "@/_components/Header";

export const metadata = {
title: "Next.js",
description: "Generated by Next.js",
};

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<PlausibleProvider
domain={process.env.NEXT_PUBLIC_DOMAIN}
trackLocalhost
/>
</head>
<body>
<Header />
{children}
</body>
</html>
);
}
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import Page from "../components/Page";

export default function Home() {
return (
<Page>
<div>
<h1>This is the Home page</h1>
</Page>
</div>
);
}
10 changes: 0 additions & 10 deletions examples/with-plausible/components/Page.js

This file was deleted.

13 changes: 9 additions & 4 deletions examples/with-plausible/package.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
{
"private": true,
"scripts": {
"dev": "next",
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"next-plausible": "^1.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"next-plausible": "^3.12.4",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@types/node": "^22.10.0",
"@types/react": "^18.3.12",
"typescript": "^5.7.2"
}
}
9 changes: 0 additions & 9 deletions examples/with-plausible/pages/_app.js

This file was deleted.

27 changes: 27 additions & 0 deletions examples/with-plausible/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"noEmit": true,
"incremental": true,
"module": "esnext",
"esModuleInterop": true,
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
Loading