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

adding with-axiom example #38300

Merged
merged 24 commits into from Sep 1, 2022
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 34 additions & 0 deletions examples/with-axiom/.gitignore
@@ -0,0 +1,34 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# 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
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel
schehata marked this conversation as resolved.
Show resolved Hide resolved
44 changes: 44 additions & 0 deletions examples/with-axiom/README.md
@@ -0,0 +1,44 @@
# Example app with Axiom

This example shows how to use a [Next.js](https://nextjs.org/) project along with [Axiom](https://axiom.co) via the [next-axiom](https://github.com/axiomhq/next-axiom) package. A custom `withAxiom` wrapper is used to wrap the next config object, middleware and API functions. The `log` object could be used from frontend, middleware and API functions.

## Deploy your own

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-axiom)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-axiom&project-name=with-axiom&repository-name=with-axiom)

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

## How to use
schehata marked this conversation as resolved.
Show resolved Hide resolved

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.


## 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-axiom with-axiom-app
# or
yarn create next-app --example with-axiom with-axiom-app
# or
pnpm create next-app --example with-axiom with-axiom-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)) and watch data coming into your Axiom dataset.
9 changes: 9 additions & 0 deletions examples/with-axiom/middleware.js
@@ -0,0 +1,9 @@
import { NextResponse } from 'next/server'
import { log, withAxiom } from 'next-axiom'

async function middleware(_req, ev) {
log.info("Hello from middleware", { 'bar': 'baz' });
return NextResponse.next()
}

export default withAxiom(middleware)
8 changes: 8 additions & 0 deletions examples/with-axiom/next.config.js
@@ -0,0 +1,8 @@
const { withAxiom } = require('next-axiom');

/** @type {import('next').NextConfig} */
const nextConfig = withAxiom({
reactStrictMode: true,
})

module.exports = nextConfig
15 changes: 15 additions & 0 deletions examples/with-axiom/package.json
@@ -0,0 +1,15 @@
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"next-axiom": "^0.10.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
schehata marked this conversation as resolved.
Show resolved Hide resolved
"swr": "^1.3.0"
}
}
11 changes: 11 additions & 0 deletions examples/with-axiom/pages/_app.js
@@ -0,0 +1,11 @@
import { log } from 'next-axiom'

export { reportWebVitals } from 'next-axiom'

log.info('Hello from frontend', { foo: 'bar' })

function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

export default MyApp
9 changes: 9 additions & 0 deletions examples/with-axiom/pages/api/hello.js
@@ -0,0 +1,9 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { log, withAxiom } from 'next-axiom'

async function handler(req, res) {
log.info('Hello from function', { url: req.url });
res.status(200).json({ name: 'John Doe' })
}

export default withAxiom(handler)
28 changes: 28 additions & 0 deletions examples/with-axiom/pages/index.js
@@ -0,0 +1,28 @@
import { log } from 'next-axiom'
import useSWR from 'swr'

export async function getStaticProps(context) {
log.info('Hello from SSR', { context })
return {
props: {},
}
}

const fetcher = async (...args) => {
log.info('Hello from SWR', { args });
const res = await fetch(...args);
return await res.json();
}

export default function Home() {
const { data, error } = useSWR('/api/hello', fetcher)

if (error) return <div>Failed to load</div>
if (!data) return <div>Loading...</div>

return (
<div>
<h1>{data.name}</h1>
</div>
)
}