Skip to content

Commit

Permalink
adding with-axiom example
Browse files Browse the repository at this point in the history
  • Loading branch information
schehata committed Jul 4, 2022
1 parent 7664a40 commit c1a85e7
Show file tree
Hide file tree
Showing 8 changed files with 158 additions and 0 deletions.
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
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

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",
"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>
)
}

0 comments on commit c1a85e7

Please sign in to comment.