I have a post card, which if clicked brings you to the post's page, i also have a link inside the post card which when clicked brings you to the album of posts the post is from.
The code structure is similar to this one:
<Link href={post.url} className={styles.post}>
...title and stuff
<Link href={post.groupUrl}>
{post.group}
</Link>
</Link>
It worked before updating to Nextjs 13
This is less of a Next.js bug because, at the end, the Link component is just a fancy a tag and also gets rendered as one in the DOM. And, as you can read here, nesting links is illegal.
Related
Both links work exactly the same, do we really need to use the as, can't we use just the href?
import Link from 'next/link'
export default function () {
return (<>
<Link href="/someroute">
<a>WithOUT as</a>
</Link>
<br />
<br />
<Link href="/[param]" as="/someroute">
<a>With as</a>
</Link>
</>
)
}
"as" is used to have a nicer url. for example, since you are in a dynamic route, that param can be something very crazy, maybe a mongodb id or any hash value
// mongodb id
/507f191e810c19729de860ea
// maybe ipfs hash
/mtwirsqawjuoloq2gvtyug2tc3jbf5htm2zeo4rsknfiv3fdp46a
From early docs
href is a file system path used by the page and it shouldn't change at
runtime. as on the other hand, will be dynamic most of the time
according to your needs.
So when next.js navigates, to decide which page to render, it will look at the href but to decide which url to show the user, it will look at the as
when "as" is helpful
Let's say you have a DynamicPostComponent and you are passing post prop
const DynamicPostComponent = ({post}) => {}
Inside this component, you would tell next.js where to go in pages directory. so you use href
// assume we have "pages/posts/[slug]" directory
href="/posts/[slug]"
now inside the page you need to read the id of blog so that you have to fetch the post to show the user. for this you use as
as={`/posts/${post.slug}`
Your Link compnent will look like this
<Link href="/postss/[slug]" as={`/posts/${post.slug}`}>
<a>
</a>
</Link>
as is removed after v10. https://nextjs.org/blog/next-10
Automatic Resolving of href: The as property is no longer needed on next/link
How to enable images to be shown when a link is shared in whatsapp? Like the link above from amprandom.blogspot.com.
OG tags modified as needed. Still does not show images. How to get it work?
You can use the Sharing Debugger to see the information that is used when your website content is shared on Facebook, Messenger and other places. The Batch Invalidator will let you refresh this information for multiple URLs at the same time. Open Graph markup lets you take control over how your website content appears to others.
Reference: https://developers.facebook.com/tools/debug/
Steps:
Add needed og tags ex. og:title, og:image, etc in your website code.
After adding necessary tags, go to Sharing Debugger and enter your website URL there.
Click on Debug. It will show all the data scrapped by it and refreshes them.
Next time you share your website/link, it will scrap metadata added to it.
Edit:
You need to add itemprop to the og:image meta-tag
Ex: change value of url_image to your image/ logo/ favicon url.
<meta property="og:image" itemprop="image" content="url_image">
Thumbnail schema from schema.org inside for WhatsApp
<link itemprop="thumbnailUrl" href="url_image">
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="url_image">
</span>
I've added theme support for a custom background to my WordPress theme, as below, but the background colour is not actually being applied (note that the options are showing correctly in admin though).
According to the docs "When the administrator sets custom values for the theme, WordPress generates an extra style sheet in-line with the HTML headers." However, this is not the case.
The <body> tag is declared as <body class="home blog logged-in admin-bar customize-support">, with the promised custom-background class neither declared in the header nor applied to the <body> tag.
Is there something I'm missing here?
Here is how I am adding custom background support.
$ps_background_defaults = array(
'default-color' => '000000'
);
add_theme_support('custom-background', $ps_background_defaults);
The problem was that I hadn't saved the custom background settings, and once I'd done that everything was fine.
This does seem like an issue with the core to me, as the default is ignored, and I am off to do some research on Trac now. I'll update with a ticket if one is opened.
I have an blog with related posts image in the top of it. I was waiting for something to fix it since they launch it, but didn't find anything yet so I'm asking for help with it.
The question is. When someone share an post with +1 button, it get the first image of the URL, which usually is one of the featured posts thumbnail.
In Facebook Share I got an plugin that get the 'featured image', but as far I researched, didn't find anyway to make it possible with G+.
So, one of the solutions I considered is making the "Featured post thumbnails" div 'hidden' to G+ button. Is it possible? Or make something similar?
You need to specify the +Snippet values. In the case where a post has no image make sure you keep the image definition but use the blog logo instead.
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="image-url"></img>
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
In addition to Abraham's way, you can specify the og: meta data tags in the <head> section of your blog posts. See http://ogp.me for more information about the og: meta tags. The one you need is <og:image />.
IIRC, Wordpress has plugins that allow you to specify og tags.
I'm currently migrating my HTML website into a WordPress theme.
My current HTML website makes full use of jQuery's .load() function, by where I change the content of the page (via a DIV), using .load() based on my side menu options selected by the user.
For example:
HTML Code:
<div id="sidebar">
<ul id="themenu" class="sf-menu sf-vertical">
<li>Home</li>
<li>About Us</li>
</ul>
</div>
jQuery Code:
$("#themenu li a, #subcat li a").click(function(){
var toLoadCF = $(this).attr("href")+" #contentfooter";
$('#contentfooter').fadeIn("slow",loadContent);
function loadContent() {
$("#contentfooter").load(toLoadCF);
}
return false;
});
So using this as an HTML situation, the user clicks on the "About Us" menu option, which would basically in turn load the "about-us.html" file based on a href tag for About Us.
Now in the WordPress world, I have created a custom page template for About Us called "about-us.php" that is linked to a WP Admin dashboard page called "aboutus" (permalink), so my a href value is "url/aboutus/"
Based on this, how can I achieve the same result in WordPress to emulate my HTML coding using jQuery .load?
Please be aware that I have added all the necessary info in my header.php, index.php and sidebar.php files.
I'm just unsure how to reference the a href file, so that my about-us.php file is loaded using jQuery's .load().
I'm not too sure how to approach this from a WordPress perspective.
First off I'd go about making the site fully functional WITHOUT the javascript loading. This'll get your navigation and site layout proper before you get fancy and will also provide a fallback for crawlers and for when your JS breaks.
Next, make a subset of templates, or modify your existing templates, to react to a GET var in the URL to exclude everything but the main content area of the template. For the Ajax load you won't need things like the header, foot and sidebar.
Then I'd use jQuery to grab navigation links click events, modify the request URI to put a GET var in, and then make the request using .load().
A side benefit of this is when you turn on caching (yes, you want to run your site with caching, its wordpress, its far from "light") your Ajax requested pages will also be cached for tighter load times and less resource usage.
I assume since you've done it before that you know how to handle the jQuery action binding, request and response parsing.