Next.js

ByteHide Logger works in Next.js applications on both client and server sides, providing comprehensive logging for full-stack applications.

Installation

npm install @bytehide/logger next

Environment Configuration

# .env.local
BYTEHIDE_PROJECT_TOKEN=your-project-token
NEXT_PUBLIC_BYTEHIDE_TOKEN=your-project-token

Client-Side Setup

// pages/_app.js
import { Log } from '@bytehide/logger';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
    useEffect(() => {
        Log.configure({
            projectToken: process.env.NEXT_PUBLIC_BYTEHIDE_TOKEN,
            logLevel: 'info'
        });
        
        Log.info('Next.js client initialized');
    }, []);

    return <Component {...pageProps} />;
}

export default MyApp;

Server-Side Setup

// lib/logger.js
import { Log } from '@bytehide/logger';

Log.configure({
    projectToken: process.env.BYTEHIDE_PROJECT_TOKEN,
    logLevel: 'info',
    fileOutput: {
        enabled: true,
        path: './logs'
    }
});

export { Log };

API Routes

// pages/api/users.js
import { Log } from '../../lib/logger';

export default async function handler(req, res) {
    Log.info('API request received', {
        context: { 
            method: req.method, 
            url: req.url 
        }
    });

    try {
        const users = await getUsers();
        
        Log.info('Users fetched successfully', {
            context: { count: users.length }
        });
        
        res.status(200).json(users);
    } catch (error) {
        Log.error('Failed to fetch users', {
            context: { endpoint: '/api/users' }
        }, error);
        
        res.status(500).json({ error: 'Internal server error' });
    }
}

Server-Side Rendering

// pages/users.js
import { Log } from '../lib/logger';

export async function getServerSideProps() {
    Log.info('Server-side rendering users page');
    
    try {
        const users = await fetchUsers();
        
        Log.info('Users data fetched for SSR', {
            context: { count: users.length }
        });
        
        return { props: { users } };
    } catch (error) {
        Log.error('SSR failed for users page', {}, error);
        return { props: { users: [] } };
    }
}

Page Component Logging

// pages/profile.js
import { Log } from '@bytehide/logger';
import { useEffect } from 'react';

export default function Profile() {
    useEffect(() => {
        Log.info('Profile page loaded');
    }, []);
    
    const handleUpdate = async () => {
        Log.info('Profile update initiated');
        
        try {
            await updateProfile();
            Log.info('Profile updated successfully');
        } catch (error) {
            Log.error('Profile update failed', {}, error);
        }
    };
    
    return <button onClick={handleUpdate}>Update Profile</button>;
}

Middleware

// middleware.js
import { Log } from '@bytehide/logger';
import { NextResponse } from 'next/server';

export function middleware(request) {
    Log.info('Middleware executed', {
        context: { 
            pathname: request.nextUrl.pathname,
            userAgent: request.headers.get('user-agent')
        }
    });
    
    return NextResponse.next();
}

Best Practices