Skip to content

next.js helper tool that enable passing server logs, which are defined inside getServerSideProps, getStaticProps, or getInitialProps, to browser.

Notifications You must be signed in to change notification settings

eddie0329/next-server-logger

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm package PR WELCOME example status


🤔 What is next-server-logger?

Have you ever had experience debugging code in getServerSideProps, getStaticProps, or getInitailProps?
It's hard to debug when application is deployed and need some extra steps to see actual logged.
Now use NextServerLogger and see logs in browser. 🎉

NextServerLogger is next.js helper tool that enable passing server logs, which are defined inside getServerSideProps, getStaticProps, or getInitialProps, to browser.

🛠 Installation

yarn add next-server-logger
npm install next-server-logger
// _app.js
import { NextServerLoggerProvider } from 'next-server-logger'

export default function App({ Component, pageProps }) {
	return (
		<>
			<NextServerLoggerProvider pageProps={pageProps} enable={process.env.NEXT_PUBLIC_ENV === 'development'} />
			<Component {...pageProps} />
		</>
	);
}

🌈 Usage

1. App.getInitialProps

import { getServerLogger } from 'next-server-logger'

App.getInitialProps = async ({ Component, ctx }) => {
	let pageProps = {};
	if (Component.getInitialProps) {
		pageProps = await Component.getInitialProps(ctx);
	}
	const logger = getServerLogger();
	logger.log('hello world'); // logging

	return {
		pageProps: { 
      ...pageProps, 
      ...logger.getAppLoggerProps() // ⭐️ need to pass logger props
    }, 
	};
};

2. getServerSideProps

import { getServerLogger } from 'next-server-logger'

export const getServerSideProps = () => {
	const logger = getServerLogger();
	logger.log('hello world server side props'); // logging
	return {
		props: {
			...logger.getLoggerProps(), // ⭐️ need to pass logger props
		},
	};
};

3. getStaticProps

import { getServerLogger } from 'next-server-logger'

export const getStaticProps = () => {
	const logger = getServerLogger();
	logger.log('hello world static props'); // logging
	return {
		props: {
			...logger.getLoggerProps(), // ⭐️ need to pass logger props
		},
	};
};

🚧 Interface

NextServerLoggerProvider

type NextServerLoggerProvider = React.FC<{ pageProps: any, enable?: boolean | true }>

NextServerLoggerProvider has two props, pageProps and enable. pageProps is next page props. enable can handle logging enabled or not.

logger.log

type logger.log = (...params: any[]) => void

Logger.log -> pass any params you want to log just like console.log

About

next.js helper tool that enable passing server logs, which are defined inside getServerSideProps, getStaticProps, or getInitialProps, to browser.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published