I have a Nextjs app.
I fetch data from a headless CMS to populate the 404 error page.
If I don't get a reasonable response from the CMS I'd like to throw a 500 error.
Is this possible from getStaticProps?
Just throw the error, NextJS will take care of generating the 500 for you.
❌ Don't add a try {} catch(){} in getStaticProps.
✅ Do this:
export async function getServerSideProps() {
throw new TypeError("Ops, CMS didn't return a reasonable response.");
}
BE AWARE: The error component is only used in production.
In development you’ll get an error with the call stack to know where the error originated from.
If you want to see what happens before deploying to production you can run the following command on your local env:
yarn build && NODE_ENV=production yarn start
⚠️ Re-run this command every-time you update the code otherwise you won't see any change.
See https://nextjs.org/docs/advanced-features/custom-error-page#more-advanced-error-page-customizing
Related
I'm making an app in next js that requires payments with stripe. When I define stripe like so, It says cannot find name 'Stripe'.
export const stripe:any = Stripe('stripe public key')
I know why this error comes up, because I am importing the stripe js code in my app.jsx file like so.
<script src='https://www.js.stripe.com/v3/'></script>
Despite the error the stripe checkout works just fine, but I can't deploy my code by running npm run build with the error. Any ideas?
In a Next.JS app, you see that the code for a component runs on both the Server and the Client.
So if you have the following code:
const Title = () => {
console.log('--> Hello')
return (<h1>Some title</h1>)
}
and you run this in a dev environment (npm run dev), you will see the console.log statement print to both the Server in the terminal as well as the Browser's console.
So firstly, what is happening here? How come all the code on the page gets run in both places on every page load?
Wouldn't Next.JS just sent a pre-transpiled HTML file to the Browser? How come that console.log statement is getting run in the Server even though we're not in getServerSideProps or something similar?
Now, this may be a core feature of React that I've overlooked, so please tell me if it's just that manifesting in Next.JS
Wouldn't Next.JS just sent a pre-transpiled HTML file to the Browser?
Yes, this is correct. But to transpile it to html it first needs to run your app and render it with ReactDOMServer.renderToString method.
So it is not specifically Next.js feature, but just a React SSR thing, every similar framework would do the same thing.
I am trying to deploy nuxtjs app as cloud function on Firebase following this tutorial. I am able to deploy everything (functions and hosting). However, when I try to open the page browser displays Error: could not handle the request.
In the function logs I see the following error: FATAL Cannot resolve "~/graphql/index.js" from "/workspace/graphql/index.js".
The path that fails to be resolved is specified in nuxt.config.js in serverMiddleware:
serverMiddleware: [{ path: '/graphql', handler: '~/graphql/index.js' }],
I tried using ./ instead of ~/ but it changes nothing. I also tried this approach, but it also makes no change, same error is thrown. Obviously dev server runs correctly.
Although the middleware is a graphql one I don't think it's a graphql problem, so no graphql tag at the moment.
Does anyone know how to set up a nuxt server middleware so that Firebase can resolve it?
I recently started working with Svelte via SvelteKit and I have a few questions about this framework to which I haven't been able to find any direct answers in the source/documentation:
SvelteKit has SSR and in the documentation it says:
All server-side code, including endpoints, has access to fetch in case you need to request data from external APIs.
What code is server-side rendered besides endpoints and how it decides this? All the code from scripts from svelte pages runs on the client or some of it runs on the server?
In order to make use of SSR locally you need an adapter for it or does svelte start a server on its own?
How does SSR work in a production environment like Netlify for example. Is the netlify adapter is used for SSR (running the endpoints in a netlify function)? If a netlify adapter is not provided, how/where would the endpoints run?
If I want to use custom netlify functions in a sveltekit project what configurations are needed (besides netlify.toml and netlify adapter) in order for netlify to recognize the functions from inside the functions directory?
What is the difference here between SSR and prerendering? SSR is used only for endpoints and other js code and prerendering is used for generating the Html to send it to the client which will then be hydrated, with the compiled js code, also sent to the browser?
Thanks!
By default, pages are also server-side rendered when you first visit a site. When you navigate to a subsequent pages they will be client-side rendered.
Adapters are only used in production. If you run npm run dev for local development you still get SSR. In production, how exactly SSR is run depends on the adapter you choose. An adapter is required for production. adapter-node runs SSR on a Node server, adapter-netlify runs SSR in Netlify functions, etc.
See here for discussion of custom Netlify functions: https://github.com/sveltejs/kit/issues/1249
SSR is used for pages as well, but prerendering means that rendering happens at build time instead of when a visitor visits the page. See this proposed documentation for more info: https://github.com/sveltejs/kit/pull/1525
Pages are SSR when you first visit the site, including all the code in the script tag of your svelte page. However, as you navigate to other pages, the code will be run on the client and the page will be dynamically rendered as Sveltekit makes a single page web app look like it has different pages with the history API.
You can decide which code runs on the server and which runs on the client. If you don't do anything special, Sveltekit and your deployment environment will decide that for you. If you want some code to run only in browser (perhaps it needs to use the window object or need authentication), you can use the browser variable.
import { browser } from '$app/environment';
if (browser) {
// Code that runs only in browser
}
You can also put the code in the onMount function, which will be run when the component first mounts, which only happens in browser.
import { onMount } from 'svelte';
onMount(() => {
// Do stuff
})
If you want SSR, you can put the function in the load function in route/+page.js. One typical use case is for a blog entry that grabs the content from the database and populates and formats the content. If you get to the page from a URL, or refresh page, the code in the load function will be executed on the server. If you navigate to the page from elsewhere in your web app, the code will be run on the client, but it will look like SSR as the UI will refresh only after the load function returns (you won't see loading screen or a blank page). See the official docs for more for more.
import { error } from '#sveltejs/kit';
/** #type {import('./$types').PageLoad} */
export function load({ params }) {
if (params.slug === 'hello-world') {
return {
title: 'Hello world!',
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
};
}
throw error(404, 'Not found');
}
I am not very sure about how to use Netlify function, as Ben mentions, you can see the discussion on https://github.com/sveltejs/kit/issues/1249. Although I think that you might be able to implement the same functionality with +page.server.js, and the "Actions" to invoke them.
I'm using Next.js + Wordpress/Graphql as headless CMS and deploying to Vercel.
I'm getting a 404 when new posts are created on production (vercel) - not happening locally or when using next build. Strangely, it solves the problem when I redeploy or when I push a new version to the repo and vercel does a fresh build.
I guess this has something to do with the Incremental Static Regeneration?
I had a similar but slightly different issue with a previous Wordpress server that was responding with 429 Too Many Requests. But that was a problem with the first build when all pages were generated and therefore more requests were made. I've switched to another server that seemed to fix the problem and now the problem only occurs after the first build (i.e. when incrementally regenerating pages on request).
Here is one of the problem pages:
https://github.com/garethfoote/blind-ditch/blob/master/pages/projects/%5Bslug%5D.js
Thought this could be the culprit but I'm not getting any remote logs from in console.re:
if (!router.isFallback && !project?.slug) {
console.re.log("404??", project);
return <ErrorPage statusCode={404} />;
}
I'm struggling to work out what is causing this and also how I might further debug this on Vercel. Advice appreciated.
After some digging around I realised that I had not fully understood the use of the fallback key in getStaticPaths.
I assumed ISR would generate new pages that weren't specified in the paths object of getStaticPaths at build time but I know realise that is what fallback: true or fallback: "blocking" does.
https://nextjs.org/docs/basic-features/data-fetching#fallback-true