I am in process of making a small SEO library for my website. It's available as #peuconomia/react-meta-tags publicly.
Now, the library is working fine from my perspective. As <SummaryCard /> component is currently wrapped by one Fragment with 5 meta tags as children. Now, in Nextjs code below. I am trying to print the meta tags using the <SummaryCard /> component. But, the head will not render the component.
Nextjs documentation reports that the Head component will render inside it at most one Fragment deep component. The <SummaryCard> works fine when used on main, but not from Head.
How to make it work inside of <Head />.
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import {SummaryCard} from "#peuconomia/react-meta-tags/lib/twitter";
export default function Home() {
return (
<div className={styles.container}>
<Head>
<SummaryCard
title={'Title'}
description={'Nothing to see here'}
imageAlt={'Image of Pokimane.'}
site={'#peuconomia'}
imageUrl={new URL('https://google.com/image.jpg')}
key={'twitter'}
/>
<title>Learn to Code</title>
<meta name="description"
content="freecodeuniversity.com. A place to learn all about the web. We teach you all the programming language(s) including HTML*, CSS and Javascript. We also teach about both NoSQL and SQL databases."/>
<link rel="icon" href="/favicon.ico"/>
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to Learn to Code!
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.tsx</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16}/>
</span>
</a>
</footer>
</div>
)
}
EDIT:
title, meta or any other elements (e.g. script) need to be contained
as direct children of the Head element, or wrapped into maximum one
level of <React.Fragment> or arrays—otherwise the tags won't be
correctly picked up on client-side navigations.
This is what Next.js suggests. It must be direct children of Head but is no problem if I add one Fragment to it as well. And, I am adding only one fragment to it at the moment.
Related
So, I have this code:
<div className="bg-black font-serif pl-20 grid text-white !scroll-smooth">
<Head>
<title>MinimDays | Ultimate minimalism</title>
<link rel="icon" href="/plant.ico" className="fill-white" />
</Head>
<section id="home">
<div className="flex">
<span className="pt-72 mr-[400px]">
<h1 className="text-3xl ">MinimDays | Ultimate minimalism</h1>
<Link href="#about"><a className="text-lg hover:text-gray-400">About</a></Link> |
<Link href="#contactus"><a className="text-lg hover:text-gray-400"> Contact Us</a></Link>
</span>
<picture>
<img src="/photo.jpg" alt="photo" className="h-[480px] w-[320px] mt-[80px] rounded-xl border-white border-4"/>
</picture>
</div>
</section>
<section id="about" className="mt-20">
<h1 className="text-3xl mb-5">About Us</h1>
<hr className="mb-5"/>
<p className="text-lg">I like the idea of digital minimalism, but apps that satisfy this category are usually paid <br /> or have a free tier which is highly limited, so I said SCREW IT, <br /> and created my own! </p>
</section>
</div>
And the scroll animation does not work. I tried on Firefox Developer Edition and Chrome, but nothing seems to help. Any suggestions?
You need to add smooth-scroll to the html element. So add this to your main css file:
html {
scroll-behavior: smooth;
}
I managed to get smooth scrolling working with your example code with the above change, in an HTML version that I put together.
I haven't tested it in Next.js, but note the <Link /> is for navigation between pages. Not sure if that will cause problems for links within the page.
MDN Smooth Scroll documentation:
When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
I've just started learning about reactjs and bulma.css. I'm trying to make a <footer> to stick to the bottom of the page using bulma's flexbox since I want to avoid writing my own css rules.
I already installed bulma using npm and imported bulma.css in the index.js like this
import "bulma/css/bulma.css";
but my code below still makes the <footer> to stick under the header..
<div className='container'>
<header className='has-text-centered'>
<h1>My Store</h1>
</header>
<div>
<h2>Dashboard Title</h2>
</div>
<footer className="has-text-centered is-flex-align-items-flex-end">
<small>
<span>Copyright #2022</span>
<br />
</small>
About
</footer>
</div>
The straightforward-bulma way would look something like:
Make sure the body and html are the full page height
Since this is every project-dependent, I've used the classic body { height: 100vh; } for now
The same for the container, it needs to be enlarged. Using the is-fullheight from the hero elements can be used (note: Consider using a hero instead of the container)
Give the footer a mt-auto which is short for margin-top: auto. This will force the footer to stick to the bottom of the page
html, body { height: 100vh; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
<div class='container hero is-fullheight'>
<header class='has-text-centered'>
<h1>My Store</h1>
</header>
<div>
<h2>Dashboard Title</h2>
</div>
<footer class="has-text-centered is-flex-align-items-flex-end mt-auto">
<small>
<span>Copyright #2022</span>
<br />
</small>
About
</footer>
</div>
I create a next js app with npx create-next-app. But When I am trying to building with running npm-run-build. It gives the error. Here next version is 12.1.0 and react version is 18. But When I use same code in next old version like 12.0.10 something like that. Then it gives no error. I thing this is the changes of next js newer version. But What I have do?
The errors like something it-
Here is index.js code-
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to Next.js!
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
This code is exactly template code when next app is created. I do nothing change here.
It looks like this is a bug within eslint, other users solved it by downgrading to a previous version (eslint-plugin-react from 7.29.0 to 7.28.0). github.com/yannickcr/eslint-plugin-react/issues/3215 - or you can just change the config to ignore ESLint on build in your nextjs app - nextjs.org/docs/api-reference/next.config.js/ignoring-eslint
Thank you for your time. I am having trouble making this Link work in react. I have used BrowserRouter and Passed the router a path and a component. However I still get a cross origin Error and Help would be awesome. Here is the code
class Products extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-4">
<div className="card">
<img
className="card-img-top"
src="/images/pathToYourImage.png"
alt="Card cap"
/>
<div className="card-body">
<h4 className="card-title">Card title</h4>
<p className="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<Link to="/">
<div className="btn btn-primary">
Go somewhere
</div>
</Link>
</div>
</div>
</div>
<div className="col-4">Product Two</div>
<div className="col-4">Product Three</div>
</div>
</div>
);
}
}
export default Products;
There was no reason to include Route or BrowserRouter
<Link to="/"><div className="btn btn-outline-primary">Go Somewhere</div></Link>
worked fine after checking indentation
Cross origin resource sharing (cors) is disabled for security reasons, you will need to manually enable it.
I use a package called cors for express based backend.
Step 1
npm install cors
Step 2
const cors = require('cors')
Final step
app.use(cors())
This will enable CORS for all routes. You can also enable for individual routes. Check the doc on github
Trying to have a modal come in from Materialize-css that i get from that npm but nothing is showing up. I am using React with React Router v4 as well
I currently have it set up in my nav bar and the search-bar changes with the #modal1 identifier but the modal doesn't pop up. I would really like to avoid hacky things like have a line or two of jQuery in componentDidMount just for this because if thats the only solution I'll just go back to bootstrap.
I'm trying it with the code straight from the Docs. Please help!
<div className='container'>
<div id="modalHere" className="modal">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
<nav>
<div className="nav-wrapper blue-grey lighten-2">
<Link to='/professionals' className="brand-logo right"><img src={pegasusIcon} alt='OurTelos logo' className="OurTelosNavbarLogo"/></Link>
<ul id="nav-mobile" className="left">
<li><Link to="/professionals/sessions">Sessions</Link></li>
<li><a className="waves-effect waves-light btn modal-trigger" href="#modalHere">Modal</a></li>
</ul>
</div>
</nav>
</div>
EDIT
I added the jquery in my index file for the modal in a script tag and my modal does pop up but not properly. Take a look. Also if I use the example with the Fixed-Footer things seem to come out and work just fine.....why
EDIT 2
Now I am having an issue that the same modals from a single exported react component will no longer show after the page has been changed by react router...