next-seo#DefaultSeo TypeScript Examples
The following examples show how to use
next-seo#DefaultSeo.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Head.tsx From nextjs-shopify with MIT License | 6 votes |
|
Head: FC<{ seoInfo: any }> = (props) => {
return (
<>
<DefaultSeo {...props.seoInfo} />
<NextHead>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="/site.webmanifest" key="site-manifest" />
<link
rel="icon"
type="image/png"
href="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F2d86a5bb30f44d2db3564aa2962bb093"
/>
</NextHead>
</>
)
}
Example #2
| Source File: _app.tsx From livepeer-com with MIT License | 6 votes |
|
render() {
const { Component, pageProps }: any = this.props;
globalStyles();
return (
<>
<title>Livepeer Video Services</title>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
</Head>
<ThemeProvider
forcedTheme={Component.theme || undefined}
disableTransitionOnChange
attribute="class"
defaultTheme={DEFAULT_THEME}
value={{
...themeMap,
dark: "dark-theme-violet",
light: "light-theme-violet",
}}>
<SnackbarProvider>
<QueryClientProvider client={queryClient}>
<MetaMaskProvider>
<ApiProvider>
<AnalyzerProvider>
<DefaultSeo {...SEO} />
<Component {...pageProps} />
</AnalyzerProvider>
</ApiProvider>
</MetaMaskProvider>
</QueryClientProvider>
</SnackbarProvider>
</ThemeProvider>
</>
);
}
Example #3
| Source File: _app.tsx From website with MIT License | 6 votes |
|
export default function CustomAppPage({ Component, pageProps, router }: AppProps) {
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || ''
return (
<CacheProvider value={emotionCache}>
<ChakraProvider theme={theme}>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#83e4fc" />
<meta name="theme-color" content="#83e4fc" />
</Head>
<DefaultSeo
title="ReactJS ID"
titleTemplate="%s · ReactJS Indonesia"
description="ReactJS ID adalah komunitas para developer React dan React Native. Kami mengadakan ajang meetup setiap bulannya, dimana para developer React bertukar informasi mengenai React dan ekosistemnya."
canonical={baseUrl + router.asPath || ''}
openGraph={{
title: 'ReactJS ID',
url: baseUrl,
description:
'ReactJS ID adalah komunitas para developer React dan React Native. Kami mengadakan ajang meetup setiap bulannya, dimana para developer React bertukar informasi mengenai React dan ekosistemnya.',
type: 'website',
site_name: 'ReactJS ID'
}}
/>
<Component {...pageProps} />
</ChakraProvider>
</CacheProvider>
)
}
Example #4
| Source File: _app.tsx From next-mdx with MIT License | 6 votes |
|
export default function App({ Component, pageProps }) {
return (
<>
<DefaultSeo
openGraph={{
title: site.name,
description: site.description,
type: "website",
url: process.env.NEXT_PUBLIC_BASE_URL,
images: [
{
url: `${process.env.NEXT_PUBLIC_BASE_URL}/images/meta.jpg`,
width: 800,
height: 600,
},
],
}}
twitter={{
handle: `@${site.social.twitter}`,
site: `@${site.social.twitter}`,
cardType: "summary_large_image",
}}
/>
<ThemeProvider theme={theme}>
<Component {...pageProps} />
</ThemeProvider>
</>
)
}
Example #5
| Source File: Head.tsx From nextjs-bigcommerce-starter with MIT License | 6 votes |
|
Head: FC = () => {
return (
<>
<DefaultSeo {...config} />
<NextHead>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="/site.webmanifest" key="site-manifest" />
</NextHead>
</>
)
}
Example #6
| Source File: _app.tsx From next-password-protect with MIT License | 6 votes |
|
render() {
const { Component, pageProps } = this.props;
return (
<ThemeProvider theme={theme}>
<DefaultSeo {...seo} />
<Component {...pageProps} />
</ThemeProvider>
);
}
Example #7
| Source File: _app.tsx From storefront with MIT License | 5 votes |
|
App: NextComponentType<AppContext, AppInitialProps, Props> = ({
apollo,
apolloState,
Component,
pageProps,
router,
}) => {
useMount(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
jssStyles?.parentNode?.removeChild(jssStyles);
ReactGA.initialize(process.env.GA_TRACKING_ID, {
debug: process.env.NODE_ENV === 'development',
});
ReactGA.plugin.require('ec');
ReactGA.pageview(router.asPath);
router.events.on('routeChangeComplete', (url: string) => {
ReactGA.pageview(url);
});
});
return (
<ApolloProvider client={apollo ?? createClient({ initialState: apolloState?.data })}>
<SettingsProvider>
<SettingsContext.Consumer>
{({ settings, seo }) => (
<>
<Head>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
{seo.webmaster?.googleVerify != null && (
<meta name="google-site-verification" content={seo.webmaster.googleVerify} />
)}
{seo.webmaster?.msVerify != null && (
<meta name="msvalidate.01" content={seo.webmaster.msVerify} />
)}
</Head>
<DefaultSeo
title={settings.title ?? undefined}
description={settings.description ?? undefined}
canonical={absoluteURL(router.asPath)}
openGraph={{
type: 'website',
locale: 'en_US',
url: absoluteURL(router.asPath),
site_name: settings.title ?? undefined,
}}
twitter={{
handle: '@artwithaliens',
cardType: 'summary_large_image',
}}
/>
</>
)}
</SettingsContext.Consumer>
<ManagedUIContext>
<CssBaseline />
<Component {...pageProps} />
</ManagedUIContext>
</SettingsProvider>
</ApolloProvider>
);
}
Example #8
| Source File: _app.tsx From frontend with Apache License 2.0 | 5 votes |
|
App = ({ Component, pageProps }: AppProps) => {
const router = useRouter()
const instance = createInstance({
urlBase: process.env.NEXT_PUBLIC_SITE_BASE_URI,
siteId: Number(process.env.NEXT_PUBLIC_MATOMO_WEBSITE_ID) || 38,
trackerUrl: 'https://webstats.gnome.org/matomo.php',
srcUrl: 'https://webstats.gnome.org/matomo.js',
})
return (
<MatomoProvider value={instance}>
<ThemeProvider>
<DefaultSeo
dangerouslySetAllPagesToNoIndex={!IS_PRODUCTION}
titleTemplate='%s | Flathub'
defaultTitle='Flathub'
twitter={{
site: '@FlatpakApps',
cardType: 'summary_large_image',
}}
openGraph={{
type: 'website',
locale: getLocaleString(router.locale),
url: process.env.NEXT_PUBLIC_URL,
site_name: 'FlatHub',
images: [
{
url: `${IMAGE_BASE_URL}flathub-social.png`,
},
],
}}
/>
<UserInfoProvider>
<Component {...pageProps} />
</UserInfoProvider>
<ToastContainer
position="bottom-right"
/>
</ThemeProvider>
</MatomoProvider>
)
}
Example #9
| Source File: _app.tsx From coindrop with GNU General Public License v3.0 | 5 votes |
|
MyApp: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
<ChakraProvider theme={theme}>
<DefaultSeo {...SEO} />
<Component {...pageProps} />
</ChakraProvider>
)
Example #10
| Source File: seo.tsx From routes with MIT License | 5 votes |
|
SEO = (): JSX.Element => {
return <DefaultSeo {...config} />
}
Example #11
| Source File: seo.tsx From samuelkraft-next with MIT License | 5 votes |
|
SEO = (): JSX.Element => {
return <DefaultSeo {...config} />
}
Example #12
| Source File: _app.tsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
const {
user,
tokenRefreshed,
closeLogin,
loadingUser,
shouldShowLogin,
loginState,
} = useContext(AuthContext);
const { registerLocalFilters } = useMyFeed();
const [showCookie, acceptCookies, updateCookieBanner] = useCookieBanner();
useTrackPageView();
useEffect(() => {
if (
tokenRefreshed &&
user &&
!user.infoConfirmed &&
window.location.pathname.indexOf(REGISTRATION_PATH) !== 0
) {
/* this will check if the user came from our registration
if the user has clicked the logout button in the registration - it should go through here because the user will be redirected
and since the window.location.replace did not clear all the local state and data like window.location.reload - we will have to force a reload
*/
const referrer = document.referrer && new URL(document.referrer);
if (referrer.pathname?.indexOf(REGISTRATION_PATH) !== -1) {
window.location.reload();
return;
}
window.location.replace(
`/register?redirect_uri=${encodeURI(window.location.pathname)}`,
);
}
updateCookieBanner(user);
}, [user, loadingUser, tokenRefreshed, router.pathname]);
useEffect(() => {
if (!tokenRefreshed || !user) {
return;
}
if (router.query.create_filters === 'true') {
registerLocalFilters().then(({ hasFilters }) => {
if (hasFilters) {
router.replace('/my-feed');
}
});
}
}, [user, loadingUser, tokenRefreshed, router.query]);
const getLayout =
(Component as CompnentGetLayout).getLayout || ((page) => page);
const { layoutProps } = Component as CompnentGetLayout;
return (
<>
<Head>
<meta
name="viewport"
content="initial-scale=1.0, width=device-width, viewport-fit=cover"
/>
<meta name="theme-color" content="#151618" />
<meta name="msapplication-navbutton-color" content="#151618" />
<meta name="apple-mobile-web-app-status-bar-style" content="#151618" />
<meta name="application-name" content="daily.dev" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="daily.dev" />
<meta name="format-detection" content="telephone=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="msapplication-TileColor" content="#151618" />
<meta name="msapplication-tap-highlight" content="no" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="/manifest.json" />
<script
dangerouslySetInnerHTML={{
__html: `window.addEventListener('load', () => { window.windowLoaded = true; }, {
once: true,
});`,
}}
/>
<link rel="preconnect" href="https://res.cloudinary.com" />
</Head>
<DefaultSeo {...Seo} canonical={canonicalFromRouter(router)} />
{getLayout(<Component {...pageProps} />, pageProps, layoutProps)}
{!user && !loadingUser && shouldShowLogin && (
<LoginModal
isOpen={shouldShowLogin}
onRequestClose={closeLogin}
contentLabel="Login Modal"
{...loginState}
/>
)}
{showCookie && <CookieBanner onAccepted={acceptCookies} />}
</>
);
}
Example #13
| Source File: _app.tsx From core with GNU Affero General Public License v3.0 | 4 votes |
|
KoreanbotsApp = ({ Component, pageProps, err, cookie }: KoreanbotsProps): JSX.Element => {
const [ shortcutModal, setShortcutModal ] = useState(false)
const [ theme, setTheme ] = useState<Theme>('system')
const [ standalone, setStandalone ] = useState(false)
const router = useRouter()
useEffect(() => {
console.log(
'%c' + 'KOREANBOTS',
'color: #3366FF; -webkit-text-stroke: 2px black; font-size: 72px; font-weight: bold;'
)
Logger.debug(`[BUILD INFO] Tag: ${parseDockerhubTag(process.env.NEXT_PUBLIC_TAG)}, Version: v${Package.version}, Hash: ${process.env.NEXT_PUBLIC_SOURCE_COMMIT}`)
console.log(
'%c' + '이곳에 코드를 붙여넣으면 공격자에게 엑세스 토큰을 넘겨줄 수 있습니다!!',
'color: #ff0000; font-size: 20px; font-weight: bold;'
)
if (!localStorage.theme) {
Logger.debug(`[THEME] ${systemTheme().toUpperCase()} THEME DETECTED`)
setTheme(systemTheme())
}
else setTheme(localStorage.theme)
setStandalone(handlePWA())
}, [])
return <div className={theme}>
<DefaultSeo
titleTemplate='%s - 한국 디스코드 리스트'
defaultTitle={TITLE}
description={DESCRIPTION}
openGraph={{
type: 'website',
title: TITLE,
url: 'https://koreanbots.dev',
site_name: TITLE,
description: DESCRIPTION,
images: [
{
url: '/logo.png',
width: 300,
height: 300,
alt: 'Logo'
}
]
}}
twitter={{
site: '@koreanbots',
handle: '@koreanbots',
cardType: 'summary'
}}
/>
<Head>
{/* META */}
<meta charSet='utf-8' />
<meta httpEquiv='X-UA-Compatible' content='IE=edge' />
<meta name='keywords' content='Korea, Korean, Discord, Bot, 디스코드봇, 한디리' />
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
{/* Android */}
<meta name='theme-color' content={THEME_COLOR} />
<meta name='mobile-web-app-capable' content='yes' />
{/* iOS */}
<meta name='apple-mobile-web-app-title' content='Application Title' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='default' />
{/* Windows */}
<meta name='msapplication-navbutton-color' content={THEME_COLOR} />
<meta name='msapplication-TileColor' content={THEME_COLOR} />
<meta name='msapplication-TileImage' content='/static/ms-icon-144x144.png' />
<meta name='msapplication-config' content='browserconfig.xml' />
{/* Pinned Sites */}
<meta name='application-name' content={TITLE} />
<meta name='msapplication-tooltip' content={DESCRIPTION} />
<meta name='msapplication-starturl' content='/' />
{/* Tap highlighting */}
<meta name='msapplication-tap-highlight' content='no' />
{/* UC Mobile Browser */}
<meta name='full-screen' content='yes' />
<meta name='browsermode' content='application' />
<meta name='nightmode' content='disable' />
<meta name='layoutmode' content='fitscreen' />
<meta name='imagemode' content='force' />
<meta name='screen-orientation' content='portrait' />
</Head>
<Navbar token={cookie.token} />
<div className='iu-is-the-best min-h-screen text-black dark:text-gray-100 dark:bg-discord-dark bg-white'>
<Component {...pageProps} err={err} theme={theme} setTheme={setTheme} pwa={standalone} />
</div>
{
!(router.pathname.startsWith('/developers')) && <Footer theme={theme} setTheme={setTheme} />
}
<Modal full isOpen={shortcutModal} onClose={() => setShortcutModal(false)} dark={theme === 'dark'} header='단축키 안내'>
<div className='px-3 h-80'>
<h3 className='text-md font-semibold'>일반</h3>
<ul>
<li className='pt-2'>
<h4 className='text-gray-500 dark:text-gray-400 text-xs'>단축키 도움말 표시</h4>
<kbd>
<PlatformDisplay osx='CMD'>
Ctrl
</PlatformDisplay>
</kbd> <kbd>/</kbd>
</li>
<li className='pt-2'>
<h4 className='text-gray-500 dark:text-gray-400 text-xs'>다크모드 전환</h4>
<kbd>
<PlatformDisplay osx='CMD'>
Ctrl
</PlatformDisplay>
</kbd>
<kbd>Shift</kbd> <kbd>D</kbd>
</li>
</ul>
</div>
</Modal>
<GlobalHotKeys keyMap={shortcutKeyMap} handlers={{
SHORTCUT_HELP: (event) => {
event.preventDefault()
setShortcutModal(value => !value)
return
},
CHANGE_THEME: (event) => {
event.preventDefault()
const overwrite = (localStorage.theme || systemTheme()) === 'dark' ? 'light' : 'dark'
setTheme(overwrite)
localStorage.setItem('theme', overwrite)
return false
}
}} />
</div>
}
Example #14
| Source File: DefaultLayout.tsx From supabase-ui-web with Apache License 2.0 | 4 votes |
|
function DefaultLayout(props: any) {
const [darkMode, setDarkMode] = useState<boolean>(true)
const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false)
useEffect(() => {
const previousVisit = localStorage.getItem('supabaseDarkMode')
const isDarkMode = previousVisit == null ? darkMode : previousVisit == 'true'
setDarkMode(isDarkMode)
document.documentElement.className = isDarkMode ? 'dark' : ''
}, [])
const updateTheme = (isDarkMode: boolean) => {
document.documentElement.className = isDarkMode ? 'dark' : ''
setDarkMode(isDarkMode)
}
function DarkModeToggle() {
const toggleDarkMode = () => {
localStorage.setItem('supabaseDarkMode', (!darkMode).toString())
updateTheme(!darkMode)
}
return (
<span onClick={() => toggleDarkMode()} className="cursor-pointer">
<Typography.Text>
<Space className="justify-between">
{darkMode ? 'Light Mode' : 'Dark mode'}
{darkMode ? <IconSun /> : <IconMoon />}
</Space>
</Typography.Text>
</span>
)
}
const contents = (
<>
<div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div className="flex items-center flex-shrink-0 px-4">
<Link href="/" as="/">
<img
className="block h-6 w-auto"
src={darkMode ? `/images/logo-dark.png` : `/images/logo-light.png`}
alt="Logo"
/>
</Link>
</div>
<div className="ml-3 mt-6">
<Badge>Alpha</Badge>
</div>
<nav className="pt-6 flex-1 bg-white dark:bg-gray-800 space-y-1">
<Menu>
<div className="flex flex-col px-4 space-y-2 mb-4">
<a className="ext-link" href="https://github.com/supabase/ui" target="_blank">
<span>GitHub</span> <IconGitHub size="tiny" />
</a>
<a className="ext-link" href="https://twitter.com/supabase" target="_blank">
<span>Follow</span> <IconTwitter size="tiny" />
</a>
<a className="ext-link" href="https://supabase.com" target="_blank">
<span>supabase.com</span>
</a>
</div>
<Link href="/">
<Menu.Item>Introduction</Menu.Item>
</Link>
<Menu.Item style={{pointerEvents: 'none' }}>Dark mode setup (coming soon)</Menu.Item>
<Menu.Item style={{pointerEvents: 'none' }}>Theming (coming soon)</Menu.Item>
<Link href="/license">
<Menu.Item>License</Menu.Item>
</Link>
<Divider light className="mt-4" />
{Object.values(MenuData).map((menu: any, i) => {
const title = Object.keys(MenuData)[i]
return (
<Fragment key={title}>
<div className="mt-4">
<Menu.Group title={title} />
</div>
{menu.map((menu: any, k: any) => {
return (
<Link
key={k}
href={`/components/${menu.toLowerCase()}`}
as={`/components/${menu.toLowerCase()}`}
>
<a>
<Menu.Item>{menu}</Menu.Item>
</a>
</Link>
)
})}
</Fragment>
)
})}
</Menu>
</nav>
</div>
<div className=" border-t dark:border-gray-600">
<div className="">
<Menu>
<Menu.Item>
<DarkModeToggle />
</Menu.Item>
</Menu>
</div>
</div>
</>
)
const site_title = 'Supabase UI'
const site_description = 'An open-source UI component library inspired by Tailwind and AntDesign.'
return (
<>
<DefaultSeo
title={site_title}
description={site_description}
openGraph={{
type: 'website',
url: 'https://ui.supabase.com/',
site_name: site_title,
images: [
{
url: `https://ui.supabase.com/og.jpg`,
width: 800,
height: 600,
alt: 'Supabase Og Image',
},
],
}}
twitter={{
handle: '@supabase',
site: '@supabase',
cardType: 'summary_large_image',
}}
/>
<div className="h-screen flex overflow-hidden bg-white dark:bg-gray-800">
<Nav
contents={contents}
show={showMobileMenu}
setShow={() => setShowMobileMenu(!showMobileMenu)}
/>
{/* <!-- Static sidebar for desktop --> */}
<div className="hidden md:flex md:flex-shrink-0">
<div className="flex flex-col w-60">
{/* <!-- Sidebar component, swap this element with another sidebar if you like --> */}
<div className="flex flex-col h-0 flex-1 border-r border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800">
{contents}
</div>
</div>
</div>
<div className="flex flex-col w-0 flex-1 overflow-hidden">
<div className="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
<button
onClick={() => setShowMobileMenu(!showMobileMenu)}
className="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-200 hover:text-gray-300 dark:text-gray-500 dark:hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
>
<span className="sr-only">Open sidebar</span>
{/* <!-- Heroicon name: outline/menu --> */}
<svg
className="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>
<main className="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabIndex={0}>
<div className="py-6">
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">{props.children}</div>
</div>
</main>
</div>
</div>
</>
)
}
