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
Related
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.
I would like to pass my logged in WP user email and user first/last names to my calendly widget. The calendly documentation explains how to do so with parameters but I'd like to do it without parameters, directly taking those from WP.
I haven't been able to find the solution and lack PHP skills.
This is what I have:
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" style="min-width:320px;height:580px;" data-auto- load="false">
<script type="text/javascript"
src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
Calendly.initInlineWidget({
url: 'https://calendly.com/fabiennewintle/chat',
prefill: {
name: first_name,
email: user_email,
}
});
</script>
</div>
<!-- Calendly inline widget end -->
The problem is with the prefill, I imagine I would have to use the wp_get_current_user() { function but I don't know how to use it and how to connect it to this iframe from my child functions.php.
If anyone had any advice I'd very much appreciate it.
I am trying to create an email that is sent to customers after they place an order. I am using Laravel 8 and installed it using the command: php artisan make:mail OrderPlaced - this created all the necessary files. I then used: php artisan vendor:publish and published all the mail blade.php files:
This is my routes file, it is sent up so I can quickly design what my email will look like without continually sending emails:
/* Test email route */
Route::get('/mailable', function () {
$order = \App\Models\Order::find(1);
return new \App\Mail\OrderPlaced($order);
});
This is my OrderPlaced.php Mail controller:
public function build()
{
return $this->markdown('emails.orders.placed')
->to($this->order->billing_email, $this->order->billing_name)
->subject($this->order->billing_name . "'s Order");
}
My issue is that I am trying to apply CSS to my placed.blade.php file. It current looks like this:
#component('mail::message')
<h1>Order Received</h1>
<p>Thank you for ordering with Mobile Mastery and we are so hyped that you decided to make us part of upgrading
your gaming experience. Your order is being prepared and shipped currently, but in the mean time do NOT delete
this email as you may need it, for example, to return an item. You order details are as follows:</p>
-- OTHER ORDER RELATED STUFF --
#endcomponent
You can see that the title has a <h1> tags and the info has <p> tags but in the actual email, only the <h1> tag is applied and the <p> is shown on screen:
Can anyone tell me how to style Laravel's #component('mail::message') effectively or point me to a good page for it? Thanks
Probably the data is escaped. You can see that the mail message blade has this
{{-- Body --}}
{{ $slot }}
Explanation from doc:
By default, Blade {{ }} statements are automatically sent through PHP's htmlspecialchars function to prevent XSS attacks. If you do not want your data to be escaped, you may use the following syntax:
Hello, {!! $name !!}
Read more
https://laravel.com/docs/8.x/blade#displaying-unescaped-data
<Link href={`/user/${username}`}>
<List.Item active={router.query.username === username}>
<List.Icon name="user" size="large" />
<List.Content>
<List.Header>
<a>Account</a>
</List.Header>
</List.Content>
</List.Item>
</Link>
If I use the next Link in the way above, my a tag is not a direct child of the next Link and my question is: is the href passed from Link to the a tag ? Otherwise I think It could hurt my web site SEO
(I now I can directly use Link around the a tag, I ask this because it could save my some styling)
Suppose I have a page that will show the details of each chapter in the book. User can navigate to other chapters from that page, as the screen has buttons of chapters in the sidebar, and the main content shows the details of the chapter.
Now the user will navigate to that page from a list of books. At the page information, there's no chapter information of that book.
Now if the URL is \bookSlug, so the page will show the details of the first chapter, even it is not mentioned in the URL, it will fetch the list of chapters then fetch the details of the first chapter from that list. This behaviour remains the same for URL \bookSlug\firstChapterSlug.
So, in react-router I used to do it like this.
<Route path={'/:bookId/:chapterId?'} component={ChapterDetails} >
And on the page, I handle the params, that id the chapterId is undefined to just fetch the first chapter or just fetch the chapter mentioned in the chapterId param.
Now, I'm stuck here,
<Link href={'/[bookSlug]/[chapterSlug]' as={'/someBookName'} >
It is just not working, even I have marked the params in the getStaticPaths optional GetStaticPaths<Props, {bookSlug: string, chapterSlug?: string}> s that I can write logic.
How can I achieve that react-router behaviour here in nextJS dynamic routing?
Since Next 9.5 you can do it by using optional catch-all routes.
You would have a route like this /[bookId]/[[...chapterId]].
And to navigate, since Next 9.5.3 you don't need "as" property in Link so Next sould handle this correctly :
<Link href='/some-book'/>
Navigation like that is not possible and incorrect with nextjs, if you provide href='/[bookSlug]/[chapterSlug]' you have to provide as='/some-book/some-chapter'
<Link href={'/[bookSlug]/[chapterSlug]' as={'/someBookName'} />
// this will produce an error
Error: The provided as value (/some-book) is incompatible with the href value (/[bookSlug]/[chapterSlug])
Possible soutions
There are two possible solutions for what you are trying to achieve
If you want the route /some-book to match with [bookSlug] and display the page for the book details and only display some chapter you have to create an index.tsx file which will be used to fetch only the book details and data for the first chapter and return a new page component from it. For example, this is what the pages folder structure might look like,
- pages
- [bookSlug]
- index.tsx
- [chapterSlug].tsx
// index.tsx can be used to fetch and display the book details and first chapter
And you have to explicitly navigate to that page like below
// for navigating to /some-book (which will display only the first chapter)
<Link href='/[bookSlug]' as={'/some-book'} />
// for navigating to /some-book/some-chapter
<Link href='/[bookSlug]/[chapterSlug]' as='/some-book/some-chapter'/>
The second solution is to only keep the [bookSlug] part of the dynamic route and fetch the book details and data for all the chapters and pass it as props. To display each chapter details page make use of shallow-routing.
When it comes to navigating to each chapter you have to make use of router.push instead of the Linkcomponent.
If you were thinking of conditionally returning paths from the function getStaticPaths where you only provide the value for param bookSlug and omit chapterSlug something like { paths: [{ params: { bookSlug: 'some-book'} }]}, this will not work.
For /[bookSlug]/[chapterSlug].js if you try to do something like that it will generate a error at build time
Error: A required parameter (chapterSlug) was not provided as a string in getStaticPaths for /[bookSlug]/[chapterSlug]