I have a problem that my website being deployed to Vercel with NextJS ISR. When I use getStaticPaths. The website will reload unlimited when I click to getStaticPaths that page.
Only getStaticProps will not make this error. I am using the hobby plan. Everything works when I am on localhost and use "npm run build and start".
here is my code:
export async function getStaticProps({ params: { slug } }) {
const res = await fetch(`${API_URL}/post/${slug}`);
const posts = await res.json();
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page:
revalidate: 10, // In seconds
};
}
export async function getStaticPaths() {
// this URL is created specifically for fetch first time of ISR
// My first post will unlimited reload**********
const res = await fetch(`${API_URL}/postforisrfirst`);
// const res = await fetch(`${API_URL}/post`);
const posts = await res.json();
// Get the paths we want to pre-render based on posts
const paths = posts.map((post) => ({
params: { slug: post.slug },
}));
return { paths, fallback: "blocking" };
}
Related
This question is more about how Vercel serverless functions work. I have requested an express.js with MongoDB and taking around 0.078 seconds to at most 1.856 seconds.
getServerSideProps works perfect on LocalHost. However, whenever I use the getServerSideProps, I get the error
[GET] /articles/637a08a20218e2e3c841e8d7
22:58:07:13
2022-11-20T20:58:17.290Z 881d4090-532d-42df-9ee2-dd759a6eae08 Task timed out after 10.02 seconds
Of course, getStaticPaths and getStaticProps works perfectly but I'll be having around 100000 dynamic routes to create which isn't scalable. I'm already using SWR for index pages (list of articles with pagination) but I can't use it for dynamic pages because it's bad for SEO
My question is, what's the cause of this timeout?
API: Express hosted on AWS Elastic Beanstalk, MongoDB Atlas serverless
Next.js
// [articleID].tsx
export const getServerSideProps: GetServerSideProps = async (context) => {
const { article } = context.params;
const article = await getFetcher(`/articles/${articleID}`);
if (!article) {
return {
notFound: true,
};
}
return {
props: { article },
};
};
Reusable fetch
async function getFetcher(path: string) {
if (!path) return;
const url = `${API_BASE_URL}${path}`;
// headers
const headers = {
Authorization: AUTHORIZED_ACCESS_TOKEN,
"Content-type": "application/json",
};
const config = { headers };
const response = await axios
.get(url, config)
.then((res) => res.data)
.catch((error) => {
console.log("GET Resource Error");
console.log(error);
return { success: false, error, message: error.message };
});
return response;
}
I have a problem figuring out how to localize my content with Next.js and Strapi.
my current file structure looks like so:
pages/
blog/
- [post].tsx
- portfolio.tsx
Inside portfolio I am fetching data for all posts created on Strapi, depending on which locale is currently set, like so:
export const getStaticProps = async ({ locale }) => {
const res = await fetch(
`https://strapi.com/api/articles?locale=${locale}&populate=*`
);
const data = await res.json();
return {
props: {
articles: data.data,
},
};
};
In [post] it looks like that:
export const getStaticPaths = async ({ locales, locale }) => {
const res = await fetch(
`https://strapi.com/api/articles?locale=${locale}&populate=*`
);
const data = await res.json()
const ids = data.data.map((post: any) => post.id);
const paths = ids
.map((id: any) =>
locales.map((locale: any) => ({
params: { post: id.toString() },
locale,
}))
)
.flat();
return {
paths,
fallback: false,
};
};
export const getStaticProps = async (context: any) => {
const id = context.params.post;
const res = await fetch(
`https://strapi.tincors.com/api/articles/${id}?populate=*`
);
const res_blocks = await fetch(
`https://strapi.tincors.com/api/articles/${id}?populate[blocks][populate]=*`
);
const data = await res.json();
const blocks_data = await res_blocks.json();
const block_data_slider = blocks_data.data.attributes.blocks[0].files.data;
return {
props: { article: data.data, slider: block_data_slider },
};
};
Note that each article on Strapi has different id for it's localized version - so as an example:
article_1_pl has id of 10
but it's english variant has id of 12.
fun fact - on portfolio.tsx data is fetched successfully, and post miniature cards are properly displaying based on the current domain (on dev I am using two different hosts for i18n - localhost:3000 for PL & example.com:3000 for EN).
However once I try to redirect myself to the full article, by clicking on the post miniature card, I get the 404 page not found error in the browser, with these errors poping each second in the console logs Error.
It doesn't matter which local host I am currently at.
cards are wrapped in a <Link href="/blog/${id}" locale={route.locale} />
However the moment I change my code in [post].tsx by removing the "locale" from the endpoint:
const res = await fetch(
`https://strapi.com/api/articles?locale=${locale}&populate=*`
);
to:
const res = await fetch(
`https://strapi.com/api/articles?populate=*`
);
suddenly each of my PL articles on localhost:3000 are displayed properly, and only the english variants aren't working (404 page not found).
I assume that it is due to the fact, that by removing the "locale" from the API endpoint it only fetches the polish articles, not the english ones, but it baffles me why it's not working at all, when I use the localized endpoint source.
How I want my app to work:
I want article description (which is generated as a dynamic route) to display in active language, by fetching localized data by the post id.
My question is:
How do I fetch the proper localized data from Strapi in [post].tsx
when using getStaticPaths & getStaticProps. What is wrong with above code and how do I fix it?
I apologize if the above description is too chaotic to understand - feel free to ask for more explanations if necessary :)
So, I am working on a simple Next.Js app. It's just a Lyrical Page but I'm running onto some issues. I'm new to Next.Js and this is my first project. So, here is my problem:
I have a dynamic set of pages/folders which looks like this:
songs (empty folder)
[singer] (child of songs containng just an index.jsx)
[title] (child of [singer] containing another index.jsx)
Now in my [title] - index.jsx im rendering a simple page providing lyrics for a specific song.
My problem is that I want to count views (every time someone opens this page) for each song sepertly. I have the following code:
export const getStaticProps = async (context) => {
const res = await fetch(`${process.env.PROXY}api/lyrics/post/${encodeURIComponent(context.params.title)}`);
const data = await res.json();
const send = await fetch(`${process.env.PROXY}api/lyrics/views/${data.post._id}`);
return {
props: {
data: data.post,
message: 200
}
}
}
export const getStaticPaths = async () => {
const res = await fetch(`${process.env.PROXY}api/lyrics/getAll`);
const data = await res.json();
const paths = data.all.map((name) => ({ params: { singer: name.singer.toString(), title: name.title.toString() } }));
return {
paths: paths,
fallback: 'blocking'
}
}
The problem is I know getStaticProps renders only on build time, however, I want to render every time so that I can count the views with my send variable.
Can someone please help me figure this out? Any help will be appreciated!
I have a nextjs app with a strapi api deployed with heroku and the frontend with firebase. I use an environnement variable to fetch my api. It worked well in localhost but not with Heroku. I get the error: Only absolute URLs are supported**
I tried to hardcode my api URL, but I guess this is not the very best solution
Does someone ever meet that kind of problem ?
> Build error occurred
TypeError: Only absolute URLs are supported
at getNodeRequestOptions (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/next/dist/compiled/node-fetch/index.js:1:64341)
at /Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/next/dist/compiled/node-fetch/index.js:1:65715
at new Promise (<anonymous>)
at fetch (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/next/dist/compiled/node-fetch/index.js:1:65650)
at fetchAPI (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/.next/server/pages/books/[name].js:7040:26)
at getProducts (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/.next/server/pages/books/[name].js:7053:26)
at getStaticPaths (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/.next/server/pages/books/[name].js:6997:60)
at buildStaticPaths (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/next/dist/build/utils.js:17:86)
at Object.isPageStatic (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/next/dist/build/utils.js:24:555)
at execFunction (/Users/mac/Documents/Website/strapi/strapi-starter/strapi-starter-next-ecommerce/frontend/node_modules/jest-worker/build/workers/processChild.js:155:17) {
type: 'TypeError'
}
api.js
export function getStrapiURL(path) {
return `https://intense-beyond-59367.herokuapp.com${path}`;
}
// Helper to make GET requests to Strapi
export async function fetchAPI(path) {
const requestUrl = getStrapiURL(path);
const response = await fetch(requestUrl);
const data = await response.json();
return data;
}
export async function getCategories() {
const categories = await fetchAPI("/categories");
return categories;
}
export async function getCategory(slug) {
const categories = await fetchAPI(`/categories?slug=${slug}`);
return categories?.[0];
}
export async function getProducts() {
const products = await fetchAPI("/books");
return products;
}
export async function getProduct(name) {
const products = await fetchAPI(`/books?name=${name}`);
return products?.[0];
}
I’ve built a basic movie DB app in Next JS to see how the framework works. It’s an app that allows you to perform CRUD operations to firebase, utilising the NextJS API endpoints.
I have the app working fine in development, however it does not work at all once to Vercel. I was wondering if anyone can shed some light?
Here is the first 'get all data' call upon initialisation. The other API calls follow the same pattern. None work once deployed.
My index page has this getInitialProps function…
Home.getInitialProps = async () => {
const categories = await getCategories()
const movies = await getMovies()
const images = movies.map(movie => {
return {
id: `image-${movie.id}`,
url: movie.cover,
name: movie.name
}
})
return {
movies,
images,
categories
}
}
This fires off the getMovies function here…
export const getMovies = async () => {
const res = await axios.get('http://localhost:3000/api/movies')
return res.data
And the API endpoint it hits looks like this…
import firebase from '../../lib/firebase';
export default async(req, res) => {
const moviesRef = firebase
.collection('movies');
const snapshot = await moviesRef.get();
const movies = [];
snapshot.forEach(doc => {
movies.push({ id: doc.id, ...doc.data() })
})
res.json(movies)
Thanks in advance!
you should use your server link, not localhost.
You shouldn't hardcode http://localhost:3000 in the request's URL. You should omit it altogether since you're using Next.js API routes (same-origin).
export const getMovies = async () => {
const res = await axios.get('/api/movies')
return res.data
}
Edit: The above solution would work with API routes if the request was happening on the client-side only.
Since the request is made in getInitialProps, you should simply move the logic in your API route to a separate function (could very well be getMovies in this case) and call that directly in getInitialProps instead.
export const getMovies = async () => {
const moviesRef = firebase.collection('movies');
const snapshot = await moviesRef.get();
const movies = [];
snapshot.forEach(doc => {
movies.push({ id: doc.id, ...doc.data() })
});
return movies;
}