diff --git a/.gitignore b/.gitignore index 66f360e..0f0d22c 100644 --- a/.gitignore +++ b/.gitignore @@ -142,4 +142,5 @@ dist /.swc # Content layer -.contentlayer \ No newline at end of file +.contentlayer +certificates \ No newline at end of file diff --git a/analytics.md b/analytics.md index 8b800cf..984f112 100644 --- a/analytics.md +++ b/analytics.md @@ -139,3 +139,81 @@ head over to https://github.com/dwyl/learn-analytics. > check https://github.com/dwyl/learn-analytics/tree/main/plausible#3-optional-monitoring-a-nextjs-website out. +We're going to install https://github.com/4lejandrito/next-plausible +to connect to our `Plausible` instance. +This library makes it easy for us to integrate +and create custom events to send over to our self-hosted `Plausible` server. + +Install it by running: + +```sh +pnpm add next-plausible -w +``` + +Now, we need to wrap our app with ``, +at the top level of our application. +This is made inside `/src/pages/_app.tsx`. + +```tsx +// These styles apply to every route in the application +import "@/src/globals.css"; +import type { AppProps } from "next/app"; +import { SessionProvider } from "next-auth/react"; +import PlausibleProvider from "next-plausible"; + +export default function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) { + return ( + + + + + + ); +} +``` + +As you can see, `` has a few properties that we need to set. +You can find the full list in https://github.com/4lejandrito/next-plausible#plausibleprovider-props. +- **`domain`** is the domain of the site we want to monitor. +It should be the same name of the site we've defined +when we set up our `Plausible` server +and is the same domain where our `Nextra` site is deployed; + +- **`selfHosted`** has to be set to `true` if we're self-hosting `Plausible`. +Otherwise, we'll get a `404` when the website we're monitoring +requests the analytics script. + +- **`customDomain`** is the custom domain where the `Plausible` analytics script +(that the browser page downloads so our `Plausible` instance can gather analytics) +is being served. +This must be defined in self-hosted applications. +It's the domain of where our `Plausible CE` instance is deployed. + +And that's it! +We've integrated `Plausible` with our app! + +When we visit our `Plausible` instance, +we'll see our visitors being shown! + +

+ +

+ +> [!NOTE] +> +> In the picture above, +> we're testing on `localhost`, +> so we tweaked the configuration of the `` for it to work on `localhost`. +> +> This is just to inform you that when you're deploying, +> you should stick to what's been mentioned above 😊. + + +## 3. What's more...? + +We've just *scratched the surface* when it comes to `Plausible` with `Nextra`/`Next.js`! +We've documented *more* features of `next-plausible` in +https://github.com/dwyl/learn-analytics/tree/main/plausible#3-optional-monitoring-a-nextjs-website +where you can learn about **custom events** and **proxying the analytics script served by your `Plausible` server**. + +We urge you to check it out to continue on your journey! \ No newline at end of file diff --git a/package.json b/package.json index e9d7c3b..0bd088b 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "next": "^14.2.4", "next-auth": "5.0.0-beta.19", "next-compose-plugins": "^2.2.1", + "next-plausible": "^3.12.1", "nextra": "^2.13.4", "nextra-theme-docs": "^2.13.4", "react": "^18.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 602bbdc..e1552c0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: next-compose-plugins: specifier: ^2.2.1 version: 2.2.1 + next-plausible: + specifier: ^3.12.1 + version: 3.12.1(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) nextra: specifier: ^2.13.4 version: 2.13.4(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -38,7 +41,7 @@ importers: version: 1.44.1 '@testing-library/jest-dom': specifier: ^6.4.6 - version: 6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.5)(ts-node@10.9.2(@types/node@20.14.5)(typescript@5.4.5)))(vitest@0.34.6) + version: 6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.5)(ts-node@10.9.2(@types/node@20.14.5)(typescript@5.4.5)))(vitest@0.34.6(jsdom@23.2.0)(lightningcss@1.25.1)(playwright@1.44.1)) '@testing-library/react': specifier: ^16.0.0 version: 16.0.0(@testing-library/dom@10.2.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -3950,6 +3953,13 @@ packages: react: '>=16.x <=18.x' react-dom: '>=16.x <=18.x' + next-plausible@3.12.1: + resolution: {integrity: sha512-DcQxB/oE8gOLuIU0SBbzN0dYYNibOXgKfnzPkO9SXug6B4Y95eT41JgbN3gjlcsqHWaDWJu/s3928O7ilo2sTg==} + peerDependencies: + next: ^11.1.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + next-seo@6.5.0: resolution: {integrity: sha512-MfzUeWTN/x/rsKp/1n0213eojO97lIl0unxqbeCY+6pAucViHDA8GSLRRcXpgjsSmBxfCFdfpu7LXbt4ANQoNQ==} peerDependencies: @@ -6556,7 +6566,7 @@ snapshots: lz-string: 1.5.0 pretty-format: 27.5.1 - '@testing-library/jest-dom@6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.5)(ts-node@10.9.2(@types/node@20.14.5)(typescript@5.4.5)))(vitest@0.34.6)': + '@testing-library/jest-dom@6.4.6(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.5)(ts-node@10.9.2(@types/node@20.14.5)(typescript@5.4.5)))(vitest@0.34.6(jsdom@23.2.0)(lightningcss@1.25.1)(playwright@1.44.1))': dependencies: '@adobe/css-tools': 4.4.0 '@babel/runtime': 7.24.7 @@ -10177,6 +10187,12 @@ snapshots: transitivePeerDependencies: - supports-color + next-plausible@3.12.1(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.44.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + next-seo@6.5.0(next@13.5.6(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: next: 13.5.6(@babel/core@7.24.7)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 2d0be63..84d5b68 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,15 +1,15 @@ // These styles apply to every route in the application -import '@/src/globals.css' -import type { AppProps } from 'next/app' -import { SessionProvider } from "next-auth/react" +import "@/src/globals.css"; +import type { AppProps } from "next/app"; +import { SessionProvider } from "next-auth/react"; +import PlausibleProvider from "next-plausible"; -export default function MyApp({ - Component, - pageProps: { session, ...pageProps }, -}: AppProps) { +export default function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) { return ( - - - - ) + + + + + + ); }