I want to add a carousel to a dynamic [slug.js] page in NextJS. I am using Tailwind to style my pages and Strapi in my API. I am able to get one picture with src={http://localhost:1337${activity.titlePicture[0].formats.large.url}}, but I do not know how I can get more than 1 picture. In the database titlePicture has multiple images. How can I get all the pictures of my API into the carousel?
You will have to use map function , as titlePicture is an array. Since map calls a function once for each element in an array. So I guess it goes as follows:
{activity.titlePicture.map((category) => (<img src={http://localhost:1337${category.formats.large.url})}
Here I have used category , you can use any other word instead of category. So map function will ensure and call each element.
I hope this answers your queries.
All you need to do is to configure the rewrites in your next app to forward all requests to the Strapi server.
To do this you need to update your next.config.js file and add the following:
module.exports = {
...
async rewrites() {
return [{
source: "/uploads/:slug",
destination: "http://127.0.0.1:1337/uploads/:slug",
}, ];
},
...
}
Your NextJS app will redirect all requests that will start with /uploads/* to your Strapi server that will return the image from static assets folder, which is strapiApp/public/uploads
Then you can just use the data from your Strapi API like this:
<Image
src = {data.img.url}
...
/>
Related
For a project I am making I will be using a route that looks something like this: collection/id. The server returns an 404 error when the given ID does not exist.
When this happens I would like to push the 404 error page that I have in my router.
{
name: 'notfound',
path: '/:pathMatch(.*)*',
component: () => import('../views/PageNotFoundView.vue'),
}
Now this is achieved by calling the following code: this.$router.push('/notfound');. However, this also changes the URL in the browser which is not something I would want. When reloading the page you should be going to collection/id.
Is there any way to push a navigation route (or component?) without changing the URL displayed?
Example: https://google.com/ajdfkasf doesn't go to https://google.com/404 but rather you keep the link and can refresh it. I could include the component in the view instead of trying to solve this with routes, but that would add overhead to all kinds of views.
If I use getStaticProps and use the data to render a page like a table of contents, is NextJS smart enough to follow those links and call getStaticProps to statically render those pages statically too?
In this example /page/[id].js is a dynamic page.
//inside: index.js
export function Page({list}) {
return (
<div>
{list.map(item => <Link href={'/page/'+item.id}><a>{item.title}</a></Link>)}
</div>
);
}
export async getStaticProps(() => {
var list = await fetch(...);
return {props: list};
});
Or am I required to use getStaticPaths to explicitly declare all those links?
It is not possible to have dynamic route (like that /page/[id].js) with getStaticProps but without getStaticPaths.
If you could, again theoretically, have that then it would make almost no sense because every page will be the same, because you can't get this param id in getStaticProps because getStaticProps is called in build time not in runtime. So you would only be able to generate one page that way and that's it.
But other that that, yes, Next.js will handle links for dynamic page just fine, for example if you have dynamic route without getStaticProps then all the links will work nicely.
If you're using getStaticProps, you also have to use getStaticPaths in /page/[id] because it's a dynamic route.
However, you do not need to explicitly return all paths in it. With fallback: 'blocking' Next.js will generate any path that wasn't returned in getStaticPaths on-demand, and cache them for future requests.
You could have the following getStaticPaths function in the /page/[id] page.
export async function getStaticPaths() {
return {
paths: [], // No pages will be generated at build time
fallback: 'blocking' // Pages not generated will be on first request
}
}
No pages would be generated at build time. Instead, all pages would be statically generated when the first request for that page comes in.
I'm evaluating next.js for a project. We need to translate the route urls, so for
example.com/about-us becomes example.com/ueber-uns in German
Basically I can acheive this with rewrites and redirects. However it is tedious to set this up manually, so I though about writing a plugin. However I haven't found any docs regarding plugin development or a public API for plugin developers. Does such exist?
(1) add a static property to my pages inside the pages folder
const SomePage: React.FC = () => {
static i18nRoutes = { de: "ueber-uns" }
return "About us"
}
(2) Inside a plugin iterate over all pages, read the static i18nRoutes prop and add rewrite and redirect rules, so if the next project is generated for the German language, example.com/ueber-uns points to example.com/about-us
What I would like to know, besides existing plugin documentation, is how I can achieve the second point?
I am using the graphql-request npm package. It is working fine for all page, and post requests, but I am not able to get the menu data.
When I do it within the IDE it returns the data as expected, however, when I call it from the Next.js client it is returning null.
This is the request:
const response = await graphcms.request(`
query MyQuery {
menu(idType: NAME, id: "navbar") {
id
name
menuItems {
nodes {
url
title
label
}
}
}
}
`);
Any ideas what can be causing this to work in the IDE but not fetching on an external request? I did not see any options for settings.
I have discovered this is because menus require locations. Since I had created a theme that simply redirected to my Next deployment, it did not include any menu locations.
You can follow these instructions to add menu locations to a theme:
https://wordpress.org/support/topic/adding-a-new-menu-location/
We built a simple blog using Next.js and noticed that none of the changes we're making on the CMS (headless wordpress) are reflected on the dynamic pages. For example we updated all the author names and although the changes show up correctly on the blog landing page, the dynamic pages are not reflecting this change (i've tried different browsers and incognito window). I understand that next.js builts these pages when deploying but if this would then mean we'd have to re-deploy everytime we make even a small udpate to the conten on the backend.
Your static pages are fetched when built. But Next.js does have an option for refreshing them on the fly.
Try revalidate options in getStaticProps (https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every second
revalidate: 1, // In seconds
}
}
They say that it's ISR approach (https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration)