ez-next
v3.0.2
Published
Helper components for common NextJS usecases
Downloads
5
Readme
Usage
Right now I've moved all generic react component based code to ez-react-lib
This is now going to be used to extend next based functionality
import { HeadMeta } from 'ez-next';
// example of global use, as it will apply opengraph data App wide
// anything not set can be overriden within the app
const Index = ({ Component, pageProps }: AppProps) => {
return (
<>
{/* All props are optional */}
<HeadMeta
url='https://nextjs.org/'
title='Next.js by Vercel - The React Framework'
author='Vercel'
siteName='Vercel'
themeColor='#000000'
description='Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.'
canonical='https://nextjs.org/'
// videoHref='https://optional-video-url'
iconApple='/apple-touch-icon.png'
icon192x192='/android-chrome-192x192.png'
icon512x512='/android-chrome-512x512.png'
metaImageSrc='/android-chrome-512x512.png'
locale='en-GB' // defaults to en-AU 🦘
manifestPath='/manifest.json'
type='OpenGraphTypes'
twitter={{
siteAtHandle: '@vercel',
authorAtHandle: '@leeerob',
titleOverride: 'Next JS',
descriptionOverride:
'Production grade React applications that scale.',
imageSrcOverride: '/better-512x512.png',
}}
// all the below default to false so only enabled if included
enableDarkMode // This is just the meta tag for dark mode
enableTitleFromSlug
enableUrlFromWindow
enableCanonicalFromWindow
/>
<Component {...pageProps} />
</>
);
};
export default Index;
When working with source code
Install the depenencies using your favourite package manager
npm i
or
yarn
or
pnpm i
Then compile with tsup from src/index.ts
npm run build
or
yarn build
or
pnpm run build
Run development to watch changes to re-run build
npm run dev
or
yarn dev
or
pnpm run dev