next-seo#DefaultSeo JavaScript 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: _app.js From Modtoberfest-Site with MIT License | 6 votes |
|
function App({ Component, pageProps }) {
return (
<Provider session={pageProps.session}>
<DefaultSeo
title="Modtoberfest"
description="Celebrating the Minecraft open source community"
canonical="https://modtoberfest.com"
openGraph={{
type: "website",
title: "Modtoberfest",
url: "https://modtoberfest.com",
description: "Celebrating the Minecraft open source community",
images: [
{
url: "https://modtoberfest.com/logo/badge-bg-pad.png",
alt: "Modtoberfest logo",
},
],
site_name: "Modtoberfest",
}}
twitter={{
cardType: "summary_large_image",
}}
/>
<Head>
<link rel="icon" type="image/png" href="/logo/badge.png" />
</Head>
<Component {...pageProps} />
</Provider>
);
}
Example #2
| Source File: _app.js From tambouille with MIT License | 6 votes |
|
export default function App({ Component, pageProps }) {
return (
<ThemeProvider attribute="class">
<Head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
</Head>
<DefaultSeo {...SEO} />
<LayoutWrapper>
<Component {...pageProps} />
</LayoutWrapper>
</ThemeProvider>
)
}
Example #3
| Source File: _app.js From benjamincarlson.io with MIT License | 6 votes |
|
function MyApp({ Component, pageProps }) {
return (
<Chakra cookies={pageProps.cookies}>
<ColorModeProvider
options={{
useSystemColorMode: false,
}}
>
<MDXProvider components={MDXComponents}>
<GlobalStyle>
<DefaultSeo {...SEO} />
<Component {...pageProps} />
</GlobalStyle>
</MDXProvider>
</ColorModeProvider>
</Chakra>
)
}
Example #4
| Source File: _app.jsx From docs with MIT License | 6 votes |
|
export default function App({ Component, pageProps }) {
const [constructor, setConstructor] = useState(false);
useEffect(() => {
if (!constructor) {
smartlookClient.init("8046e53cf51c2e51fc173ffc28bd6343f04ed2ec");
setConstructor(true);
}
});
return (
<ThemeProvider attribute="class" defaultTheme="system">
<MDXProvider components={mdComponents}>
<DefaultSeo {...SEO} />
<div className="bg-white dark:bg-dark-bg-primary dark:text-dark-text-primary">
<div className="w-full fixed z-50 border-b bg-white dark:bg-dark-bg-header">
<Header />
</div>
<div className="md:container w-full mx-auto px-4 flex flex-col md:flex-row ">
<Menu />
<div
className="w-full pt-16 md:pt-28 md:w-4/5 pb-24"
style={{ minHeight: "calc(100vh)" }}
>
<Component {...pageProps} />
</div>
</div>
</div>
</MDXProvider>
</ThemeProvider>
);
}
Example #5
| Source File: _app.js From strapi-starter-next-corporate with MIT License | 6 votes |
|
MyApp = ({ Component, pageProps }) => {
// Extract the data we need
const { global } = pageProps
if (global == null) {
return <ErrorPage statusCode={404} />
}
const { metadata } = global
return (
<>
{/* Favicon */}
<Head>
<link rel="shortcut icon" href={getStrapiMedia(global.favicon.url)} />
</Head>
{/* Global site metadata */}
<DefaultSeo
titleTemplate={`%s | ${global.metaTitleSuffix}`}
title="Page"
description={metadata.metaDescription}
openGraph={{
images: Object.values(metadata.shareImage.formats).map((image) => {
return {
url: getStrapiMedia(image.url),
width: image.width,
height: image.height,
}
}),
}}
twitter={{
cardType: metadata.twitterCardType,
handle: metadata.twitterUsername,
}}
/>
{/* Display the content */}
<Component {...pageProps} />
</>
)
}
Example #6
| Source File: _app.js From remotebond-remote-jobs with Creative Commons Zero v1.0 Universal | 5 votes |
|
App = ({ Component, pageProps }) => {
const router = useRouter()
useEffect(() => {
const handleRouteChange = (url) => {
gtag.pageview(url)
}
router.events.on("routeChangeComplete", handleRouteChange)
return () => {
router.events.off("routeChangeComplete", handleRouteChange)
}
}, [router.events])
return (
<>
<DefaultSeo {...SEO} />
<NextSeo
title="Remotebond - Remote jobs in Software Development, Sales and more"
description="Looking for a remote job? Hire Remote! Remotebond has thousands of remote work jobs as a Developer, Designer, Customer Support Rep, Sales Professional, Marketing Professional, Project Manager and more!"
/>
<Head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/siteimg/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/siteimg/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/siteimg/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<link
rel="mask-icon"
href="/siteimg/safari-pinned-tab.svg"
color="#3c99f7"
/>
<link rel="shortcut icon" href="/siteimg/favicon.ico" />
<meta name="msapplication-TileColor" content="#3c99f7" />
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
"@context": "http://schema.org",
"@type": "Organization",
name: "Remotebond",
url: "https://remotebond.com",
logo: "https://remotebond.com/siteimg/logo.png",
sameAs: ["https://twitter.com/remotebond"],
}),
}}
></script>
</Head>
<SWRConfig
value={{
fetcher: fetch,
onError: (err) => {
console.error(err)
},
}}
>
<Layout user={pageProps.user}>
<Component {...pageProps} />
<NextNprogress color="#1c64f2" options={{ showSpinner: false }} />
</Layout>
</SWRConfig>
</>
)
}
Example #7
| Source File: AppProviders.jsx From dineforward with MIT License | 5 votes |
|
AppProvider = ({ children }) => {
return (
<AppSettingsProvider>
<DefaultSeo
title={title}
description={description}
openGraph={{
url: 'https://dineforward.org',
title,
description,
images: [{ url: `${HOST}/images/social_fb` }, { url: `${HOST}/images/social_twitter` }],
// eslint-disable-next-line @typescript-eslint/camelcase
site_name: 'COVID-19 Help Restaurants in need',
}}
twitter={{
handle: '@dineforward',
site: '@dineforward',
cardType: 'summary_large_image',
}}
/>
<PageTransition timeout={300} classNames="page-transition">
<NoOp>
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
<style jsx global>{`
.page-transition-enter {
opacity: 0;
transform: translate3d(0, 20px, 0);
}
.page-transition-enter-active {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: opacity ${TIMEOUT}ms, transform ${TIMEOUT}ms;
}
.page-transition-exit {
opacity: 1;
}
.page-transition-exit-active {
opacity: 0;
transition: opacity ${TIMEOUT}ms;
}
.loading-indicator-appear,
.loading-indicator-enter {
opacity: 0;
}
.loading-indicator-appear-active,
.loading-indicator-enter-active {
opacity: 1;
transition: opacity ${TIMEOUT}ms;
}
`}</style>
</ThemeProvider>
</NoOp>
</PageTransition>
</AppSettingsProvider>
);
}
Example #8
| Source File: index.js From NextJS-Boilerplate-withAtomicDesign with MIT License | 5 votes |
|
render(){
const { children, title, description, url, images, showSidebar } = this.props;
return(
<Fragment>
<DefaultSeo openGraph={appConfig.openGraph}/>
<NextSeo
title={title}
description={description}
openGraph={{
url,
title,
description,
images
}}
/>
<SiteHeader />
<MainSection>
<div className="container">
<div className="row">
<div className={showSidebar ? 'main-content' : 'full-mainContent'}>{children}</div>
{showSidebar && <SiteSidebar />}
</div>
</div>
</MainSection>
<SiteFooter />
<style jsx global>
{`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.row {
display:flex;
flex-wrap:wrap;
}
.container {
width:1020px;
margin: auto;
}
.section-container {
padding: 40px 0;
}
.full-mainContent {
width:100%;
padding:14px;
}
.main-content {
width:70%;
padding:14px;
}
`}
</style>
</Fragment>
)
}
Example #9
| Source File: _app.jsx From club-connect with GNU General Public License v3.0 | 4 votes |
|
MyApp = ({ Component, pageProps }) => {
const router = useRouter();
const dispatch = useDispatch();
const [loadingViewActive, setLoadingViewActive] = useState(false);
const [width, setWidth] = useState(windowSupported() ? window.innerWidth : 0);
useEffect(async () => {
// Safety check to log out the user if the user data doesn't exist
if (getUserIsLoggedIn() && getItemJson('loggedInUserData') === undefined) {
toastErrorCenter(
'Your local member data was not found. Please log in again.'
);
await setLoggedOut(dispatch, router);
router.reload();
return;
}
// Initialize localStorage on first visit
if (!getItemJson('initialSetupDone')) {
setItemJson('userLoggedIn', false);
setItemJson('initialSetupDone', true);
}
// Refresh user data on page load
if (getUserIsLoggedIn()) {
await refreshUserData();
dispatch(logInAction());
}
// Window resize
window.addEventListener('resize', () => setWidth(window.innerWidth));
const handleRouteChangeStart = (url) => {
const urlStart = url.substring(0, 8);
const urlSplit = url.split('/');
if (
urlStart === '/events/' &&
urlSplit.length > 2 &&
urlSplit[2] !== undefined &&
urlSplit[2] !== 'request' &&
urlSplit[2] !== 'create' &&
urlSplit[2] !== 'edit'
) {
window.scroll({
top: 0,
left: 0,
});
setLoadingViewActive(true);
}
};
const handleRouteChangeComplete = (url) => {
setLoadingViewActive(false);
ReactGA.pageview(url);
};
// Initialize on first page load
ReactGA.initialize(process.env.NEXT_PUBLIC_GA_ID);
ReactGA.pageview(router.asPath);
// Register route change event listeners
router.events.on('routeChangeStart', handleRouteChangeStart);
router.events.on('routeChangeComplete', handleRouteChangeComplete);
return () => {
// Unregister event listeners
window.removeEventListener('resize', () => setWidth(window.innerWidth));
router.events.off('routeChangeStart', handleRouteChangeStart);
router.events.off('routeChangeComplete', handleRouteChangeComplete);
};
}, []);
const siteTitle = `${SITE_NAME_BASE} – Brooklyn College's Premier Computer Science Community`;
const siteDescription =
'The Brooklyn College Computer Science Club is Brooklyn College’s premier student-led, community-first computer science community.';
return (
<>
<Head>
<title>{siteTitle}</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<meta name="theme-color" content="#f8c560" />
<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" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta
name="apple-mobile-web-app-title"
content="BC Computer Science Club"
/>
<meta name="application-name" content="BC Computer Science Club" />
<meta name="msapplication-TileColor" content="#b91d47" />
<meta name="theme-color" content="#ffffff" />
{/* IE11 Custom Properties Polyfill Script */}
{/* Will only load if IE11 is being used */}
{windowSupported() &&
window.MSInputMethodContext &&
document.documentMode &&
console.log('Polyfilling IE11 Custom Properties...') &&
document.write(
'<script src="https://cdn.jsdelivr.net/gh/nuxodin/[email protected]/ie11CustomProperties.min.js"></script>'
)}
</Head>
<DefaultSeo
title={SITE_NAME_BASE}
description={siteDescription}
openGraph={{
site_name: SITE_NAME_BASE,
title: siteTitle,
description: siteDescription,
images: [{ url: siteImage }],
type: 'website',
url: 'https://bccompsci.club',
}}
twitter={{
cardType: 'summary_large_image',
}}
/>
<HamburgerMenuProvider>
<HamburgerMenu />
<Header />
</HamburgerMenuProvider>
{loadingViewActive ? (
// Only activates for the event loading page for now
<LoadingEventPage />
) : (
<Component width={width} {...pageProps} />
)}
<ToastContainer />
<Footer width={width} />
</>
);
}
Example #10
| Source File: _app.js From awesome-tools with MIT License | 4 votes |
|
function MyApp({ Component, pageProps }) {
useEffect(() => {
const { page } = require("cubedev-tracking");
page();
}, []);
const router = useRouter();
return (
<Fragment>
<Head>
<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="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<link rel="icon" href="/favicon.png" type="image/png" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<meta
name="google-site-verification"
content="zJjljUArvZ0PVn8naOnxEue8ZX0wh0nsM0q32NYnzzQ"
/>
<link
rel="preload"
href="/fonts/CeraPro-Regular.woff2"
as="font"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/fonts/CeraPro-Medium.woff2"
as="font"
crossOrigin="anonymous"
/>
<style
dangerouslySetInnerHTML={{
__html: `
@font-face {
font-family: CeraPro;
src: url(/fonts/CeraPro-Regular.woff2);
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: CeraPro;
src: url(/fonts/CeraPro-Medium.woff2);
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: CeraPro;
src: url(/fonts/CeraPro-Bold.woff2);
font-weight: 700;
font-style: normal;
font-display: swap;
}
`,
}}
/>
</Head>
<DefaultSeo
openGraph={{
type: "website",
url: `https://awesome.cube.dev${router.asPath}`,
images: [
{
url: "https://cubedev-blog-images.s3.us-east-2.amazonaws.com/482a86d6-d049-4d92-a0bf-0fcc5830476f.jpeg",
alt: "Data visualization tools for application developers",
width: 1200,
height: 630,
},
],
}}
twitter={{
cardType: "summary_large_image",
site: "@thecubejs"
}}
/>
<PurpleBanner utmSource="awesome"/>
<Header />
<Component {...pageProps} />
<Footer />
</Fragment>
);
}
Example #11
| Source File: _app.jsx From ui with MIT License | 4 votes |
|
WrappedApp = ({ Component, pageProps }) => {
const { httpError, amplifyConfig } = pageProps;
const router = useRouter();
const { experimentId } = router.query;
const experimentData = useSelector(
(state) => (experimentId ? state.experimentSettings.info : {}),
);
const [amplifyConfigured, setAmplifyConfigured] = useState(!amplifyConfig);
const environment = useSelector((state) => state.networkResources.environment);
useEffect(() => {
initTracking(environment);
}, []);
useEffect(() => {
if (amplifyConfig) {
Amplify.configure(amplifyConfig);
if (environment === 'development') {
mockCredentialsForInframock();
}
setAmplifyConfigured(true);
}
}, [amplifyConfig]);
if (!amplifyConfigured) {
return <></>;
}
const mainContent = () => {
// If this is a not found error, show it without the navigation bar.
if (Component === NotFoundPage) {
return <Component {...pageProps} />;
}
// If there was an error querying the API, display an error state.
if (httpError) {
if (httpError === 404) {
return (
<NotFoundPage
title={'Analysis doesn\'t exist'}
subTitle={'We searched, but we couldn\'t find the analysis you\'re looking for.'}
hint='It may have been deleted by the project owner. Go home to see your own projects and analyses.'
/>
);
}
if (httpError === 403) {
return (
<NotFoundPage
title='Analysis not found'
subTitle={'You don\'t have access to this analysis. The owner may have made it private.'}
hint='If somebody gave you this link, they may need to invite you to their project.'
/>
);
}
if (httpError === 401) {
return (
<UnauthorizedPage
title='Log in to continue'
subTitle="We can't show you this page."
hint='You may be able to view it by logging in.'
/>
);
}
return <Error statusCode={httpError} />;
}
// Otherwise, load the page inside the content wrapper.
return (
<AppRouteProvider>
<ContentWrapper
routeExperimentId={experimentId}
experimentData={experimentData}
>
<Component
experimentId={experimentId}
experimentData={experimentData}
{...pageProps}
/>
</ContentWrapper>
</AppRouteProvider>
);
};
return (
<>
<DefaultSeo
titleTemplate='%s · Cellenics'
defaultTitle='Cellenics'
description='Cellenics turns your single cell datasets into meaningful biology. It’s free for academic researchers, and you get world-class quality analytical insight: simple data upload, data integration for batch effect correction, beautiful publication-quality figures, and much more.'
twitter={{
site: '@BiomageLtd',
cardType: 'summary',
}}
openGraph={{
type: 'website',
locale: 'en_US',
site_name: 'Biomage Cellenics',
}}
/>
<TagManager
environment={environment}
/>
{mainContent(Component, pageProps)}
</>
);
}
