Half an hour ago I was writing Next.js. Everything was good and okay then suddenly my application stopped http requests.
export async function getStaticProps() {
try{
const res = await Promise.all([
axios.get(`${process.env.API_URL}announcements?page=1&limit=3`),
axios.get(`${process.env.API_URL}executives?sort=createdAt`)
]);
const initAnnouncements = res[0]?.data.data.data
const initExecutives = res[1]?.data.data.data
return {
props: {
initAnnouncements,
initExecutives
}
}
} catch {return {notFound: true}}
}
The data property of the above promise is some crazy random string. I tried with fetch and I got [{}{}]. What is going on here any solutions?
Edit: My Node server works very-well. I can reach above paths from browser and successfully get the data.
PS: I fixed the problem. No answer needed.
Related
I'm trying to get Vuefire Storage to wait for a file to finish uploading so that I can get the image URL and update Auth and the Firestore. The upload() method is supposed to return a promise, but it doesn't seem to wait for it to resolve before executing the code in .then()
const submit = async () => {
const storage = useFirebaseStorage()
const avatarFileRef = storageRef(storage, fileName.value)
const { url, upload, uploadProgress } = useStorageFile(avatarFileRef)
await upload(file.value[0])!
.then(() => {
if (uploadProgress.value == 1) {
console.log(url.value)
updateAuth(url.value!)
}
})
.catch((error) => {
console.log(error)
// file save error message
})
}
console.log(url.value) is returning null.
I think it is related to the issue i had. I raised it to Eduardo, maintainer of vuefire. Currently there is no way around it. You can see the thread here. It will probably be fixed in the next version.
I have tried disabling reactStrictMode in next.config.js but it's not the problem. My code is just connecting to MongoDB and finding a user in the database and returning the user. Here is my component:
export const revalidate = 20;
async function getUsers() {
const client = await clientPromise;
const db = client.db("local");
const data = await db
.collection("users")
.find({ email: "bob123#gmail.com" })
.toArray();
console.log("THIS IS THE SERVER RUNNING");
return data;
}
export default async function Home() {
const users = await getUsers();
if (!users) return notFound();
return (
<main className={styles.main}>
{users?.map((user) => (
<p key={user._id}>{user.name}</p>
))}
</main>
);
}
Even in build mode, I still get my console.log() of "THIS IS THE SERVER RUNNING" printed out twice as you see below in the terminal. This happens every 20 seconds because of my revalidation setting.
My worry here is every 20 seconds I'm revalidating data twice, when it should only be once.
Anyone have any fix or explanation for this? Or could it possibly be a bug in Nextjs 13?
I have a page with getStaticProps such as:
export async function getStaticProps(context) {
try {
const res = await fetch(`https://example.com/getSomeData`)
const data = await res.json()
if (!data) {
return {
notFound: true,
}
}
return {
props: { data , revalidate: 10}
}
} catch (error){
// if something goes wrong with the fetch request (e.g. ECONNRESET due to timeout) we reach this code
// what should we return?
}
}
Everything loads ok at build time and the site works. Unfortunately, when a page revalidates and makes a call to example.com there is a timeout (server is down or whatever) and an error is caught.
My question is what should we return in that case. If we return notFound: true then the page never gets revalidated again (once the server is back working).
I'm working with next.js, in development mode everything works fine, but in production mode I have a problem when rendering the pages dynamically.
I have the following path inside the pages folder
pages/user/[id], and this component is where I call the getServerSideProps function.
import headers from '../../headers';
export async function getServerSideProps(context) {
const URL = 'https://somewhere...';
let { id } = context.params;
const apiResponse = await fetch(
`${URL}/${id}/detail`,
{
headers: headers,
}
);
if (apiResponse.ok) {
const data = await apiResponse.json();
return {
props: data, // will be passed to the page component as props
};
} else {
return { props: {} };
}
}
My problem is the following, I need to send in headers the authentication token that I only get when I login and I get the 2FA code, so in build time, that info does not exist and I get a 401 error no authorizate when execute npm run build and when I access to /user/34 for example I get a 404 error.
I have checked these questions at stackoverflow:
NextJs: Static export with dynamic routes
https://stackoverflow.com/questions/61724368/what-is-the-difference-between-next-export-and-next-build-in-next-js#:~:text=After%20building%2C%20next%20start%20starts,can%20serve%20with%20any%20host.&text=js%20will%20hydrate%20your%20application,to%20give%20it%20full%20interactivity.
next.js getStaticPaths list every path or only those in the immediate vicinity?
I have some parts in my app that are statics and works fine, but the problem is with the dynamic paths, as next.js is not creating those paths.
EDIT: I'll include a image with other problem, if after the fetch in the if I just say :
if(apiResponse){ //without 'ok'
}
I'll recieve this errror:
return {
props: data, // will be passed to the page component as props
}
props should be object
return {
props: {data} // or props: {data:data}
}
I have a page which requires making an HTTP request to an API which might take more than 10 seconds to respond, and my host limits me to 10 second executions.
Is there a way that I can load a temporary page or something and then asynchronously load the rest of the data? I'm currently doing this:
export async function getServerSideProps({ params }) {
const res = await fetch(`${process.env.API_USER}name=${params['name']}`)
const videos = await res.json()
const tag_res = await fetch(`${process.env.API_TAG}author=${params['name']}`)
const tags = await tag_res.json()
const name = params['name']
return {
props: { videos, tags, name }, // will be passed to the page component as props
}
}
Lets's move your HTTP request from getServerSideProps to client side (your components)
// Functional component
useEffect(() => {
fetch(...)
}, [])
// Class-based component
componentDidMount() {
fetch(...)
}
If you still want to stick with getServerSideProps, maybe you have to upgrade/switch your host, or implement a proxy/wrapper server for handling your HTTP request and return response as fast as it can