├── .eslintrc.json ├── .gitignore ├── LICENSE ├── README.md ├── app ├── favicon.ico ├── globals.css ├── layout.tsx └── page.tsx ├── assets ├── logs.png ├── og.png └── traces.png ├── instrumentation.ts ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── next.svg └── vercel.svg ├── tailwind.config.ts └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) [2024] [Baselime Limited] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Next.js Baselime Template with OpenTelemetry 2 | 3 | ![image](./assets/og.png) 4 | 5 | This is a [Next.js](https://nextjs.org/) project instrumented with [OpenTelemetry](https://opentelemetry.io/) and [Real User Monitoring](https://baselime.io/docs/sending-data/react-rum/) and sending logs and traces to [Baselime](https://console.baselime.io). 6 | 7 | ## Deployment 8 | 9 | This project is deployed to Vercel 10 | 11 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbaselime%2Fbaselime-nextjs-template&project-name=next-baselime-opentelemetry&repository-name=next-baselime-opentelemetry&demo-title=Baselime&demo-description=See%20the%20deployed%20data%20for%20this%20project&demo-url=https%3A%2F%2Fsandbox.baselime.io%2Fbaselime%2Fvercel-baselime%2Fdefault%2Fhome&demo-image=https%3A%2F%2Fgithub.com%2Fbaselime%2Fbaselime-nextjs-template%2Fraw%2Fmain%2Fassets%2Fog.png&integration-ids=oac_Giinlv0yMW9d97AysfaDTS6z) 12 | 13 | ## Logging 14 | 15 | This template will automatically install the [Baselime Vercel Integration](https://vercel.com/integrations/baselime) which will setup a log drain to automatically capture all the logs from your Vercel projects. 16 | 17 | ![image](./assets/logs.png) 18 | 19 | ## Distributed Tracing With OpenTelemetry 20 | 21 | This template is instrumented with the [Baselime OpenTelemetry SDK for Next.js](). This instrumentation will automatically capture distributed traces from your Next.js application and export them to Baselime for analysis. 22 | 23 | ![image](./assets/traces.png) 24 | 25 | 26 | ## Instructions 27 | 28 | First, run the development server: 29 | 30 | ```bash 31 | npm run dev 32 | # or 33 | yarn dev 34 | # or 35 | pnpm dev 36 | # or 37 | bun dev 38 | ``` 39 | 40 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 41 | 42 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 43 | 44 | ## Learn More 45 | 46 | * To learn more about baselime go do the [docs](https://baselime.io/docs/) 47 | * To see the deployed applications logs, and traces go to the [Baselime Console](https://console.baselime.io) 48 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baselime/baselime-nextjs-template/6b64ad6f221ef376af1228ae3fb1cea04336033d/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: linear-gradient( 22 | to bottom, 23 | transparent, 24 | rgb(var(--background-end-rgb)) 25 | ) 26 | rgb(var(--background-start-rgb)); 27 | } 28 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | import { Inter } from 'next/font/google' 3 | import { BaselimeRum } from '@baselime/react-rum' 4 | import './globals.css' 5 | 6 | const inter = Inter({ subsets: ['latin'] }) 7 | 8 | export const metadata: Metadata = { 9 | title: 'Create Next App', 10 | description: 'Generated by create next app', 11 | } 12 | 13 | export default function RootLayout({ 14 | children, 15 | }: { 16 | children: React.ReactNode 17 | }) { 18 | return ( 19 | 20 | 21 | An error occured}> 22 | {children} 23 | 24 | 25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image' 2 | import pino from 'pino'; 3 | import { headers } from 'next/headers' 4 | 5 | const logger = pino(); 6 | export default function Home() { 7 | 8 | const headerList = headers(); 9 | 10 | logger.info({ 11 | meta: { 12 | requestId: headerList.get('x-vercel-id'), 13 | source: "page.tsx", 14 | } 15 | }, "Hello from Next.js"); 16 | 17 | logger.error({ 18 | meta: { 19 | source: "page.tsx", 20 | } 21 | }, "Error from Next.js"); 22 | 23 | return ( 24 |
25 |
26 |

27 | Get started by editing  28 | app/page.tsx 29 |

30 |
31 | 37 | By{' '} 38 | Vercel Logo 46 | 47 |
48 |
49 | 50 |
51 | Next.js Logo 59 |
60 | 61 |
62 | 68 |

69 | Docs{' '} 70 | 71 | -> 72 | 73 |

74 |

75 | Find in-depth information about Next.js features and API. 76 |

77 |
78 | 79 | 85 |

86 | Learn{' '} 87 | 88 | -> 89 | 90 |

91 |

92 | Learn about Next.js in an interactive course with quizzes! 93 |

94 |
95 | 96 | 102 |

103 | Templates{' '} 104 | 105 | -> 106 | 107 |

108 |

109 | Explore the Next.js 13 playground. 110 |

111 |
112 | 113 | 119 |

120 | Deploy{' '} 121 | 122 | -> 123 | 124 |

125 |

126 | Instantly deploy your Next.js site to a shareable URL with Vercel. 127 |

128 |
129 |
130 |
131 | ) 132 | } 133 | -------------------------------------------------------------------------------- /assets/logs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baselime/baselime-nextjs-template/6b64ad6f221ef376af1228ae3fb1cea04336033d/assets/logs.png -------------------------------------------------------------------------------- /assets/og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baselime/baselime-nextjs-template/6b64ad6f221ef376af1228ae3fb1cea04336033d/assets/og.png -------------------------------------------------------------------------------- /assets/traces.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baselime/baselime-nextjs-template/6b64ad6f221ef376af1228ae3fb1cea04336033d/assets/traces.png -------------------------------------------------------------------------------- /instrumentation.ts: -------------------------------------------------------------------------------- 1 | export async function register() { 2 | if (process.env.NEXT_RUNTIME === 'nodejs') { 3 | const { BaselimeSDK, VercelPlugin, BetterHttpInstrumentation } = await import('@baselime/node-opentelemetry'); 4 | 5 | const sdk = new BaselimeSDK({ 6 | serverless: true, 7 | instrumentations: [ 8 | new BetterHttpInstrumentation({ 9 | plugins: [ 10 | // Add the Vercel plugin to enable correlation between your logs and traces for projects deployed on Vercel 11 | new VercelPlugin() 12 | ] 13 | }), 14 | ] 15 | }); 16 | 17 | sdk.start(); 18 | } 19 | } -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | experimental: { 4 | instrumentationHook: true, 5 | } 6 | } 7 | 8 | module.exports = nextConfig 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "baselime-nextjs-template", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@baselime/node-opentelemetry": "^0.2.10", 13 | "@baselime/react-rum": "^0.2.5", 14 | "next": "14.0.1", 15 | "pino": "^8.16.1", 16 | "react": "^18", 17 | "react-dom": "^18" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^20", 21 | "@types/react": "^18", 22 | "@types/react-dom": "^18", 23 | "autoprefixer": "^10.0.1", 24 | "eslint": "^8", 25 | "eslint-config-next": "14.0.1", 26 | "postcss": "^8", 27 | "tailwindcss": "^3.3.0", 28 | "typescript": "^5" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from 'tailwindcss' 2 | 3 | const config: Config = { 4 | content: [ 5 | './pages/**/*.{js,ts,jsx,tsx,mdx}', 6 | './components/**/*.{js,ts,jsx,tsx,mdx}', 7 | './app/**/*.{js,ts,jsx,tsx,mdx}', 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 13 | 'gradient-conic': 14 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | } 20 | export default config 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | --------------------------------------------------------------------------------