Nextjs allows us to use placeholder="blur" for the images that we statically import first.
For other images, we can specify a blurDataURL, however this needs generating the blurDataURL for each image on the fly.
I have failed to find a way to generate that blurDataURL in nextjs itself instead of going for third party api's that provide that.
So my queries are:
How can we generate blurDataURL for dynamic images from within nextjs? (by using some library?)
How can we make nextjs just use placeholder="blur" for non statically imported images but coming from the same project folders?
Thanks
Related
I am building a Nuxt 3 SSR application, which I'm getting rather familiar with. What I can't wrap my head around, if it's even possible, is to have a single Nuxt project for multiple domains. For example, I have a few websites such as websitea.com, websiteb.com, websitec.com, and want to keep pages separate, while sharing components, compostables, etc. I'm not sure if this is possible, but it would be greatly appreciated if anyone has any advice.
I had this requirement too and came up with this solution:
Everything is shared as one Nuxt 3 app with a single nuxt.config.ts. The only difference is that each app has it's own sub-directory within /pages.
Here's how I set it up:
Create a pages structure like this:
/pages
--/website1
--/website2
--/website3
Define an env variable like WEBSITE_ID (e.g. within your project's .env)
WEBSITE_ID="website1"
Inside of nuxt.config.ts add this configuration:
export default defineNuxtConfig({
//...
dir: {
pages: `pages/${process.env.WEBSITE_ID}`
},
//...
})
When it's time to deploy your apps, inject the corresponding WEBSITE_ID env variable for each at build time.
While in development, simply edit the WEBSITE_ID within the .env to switch which website you're working on.
This setup makes it so that for example, when website1 is active, pages/website1 is treated as the /pages directory... so pages/website1/index.vue would be resolved when requesting /.
One of the solution would be to create a library using Nuxt Kit. This library will contain all of your components, composables and everything you need to share between your projects. You will need to add your library as a dependency of your different websites.
If you don't want to deal with multiple git repositories you can create a monorepo. (For example using pnpm: https://pnpm.io/fr/workspaces)
I have a NextJS project using Relay. I have it working fine in development, but when I build, it is building static pages and is trying to access my GraphQL server (in dev it is pointed to https://localhost:3000/api/graphql), but I don't want it to since it should be a dynamic page.
With that, I also can't seem to get SSR working with Relay since a lot of functionality in Relay requires hooks and we can't use hooks in non React components (like getServerSideProps()). I got as far as using loadQuery from Relay in getServerSideProps but now my issue is that I need to get the Relay environment somehow, but again, can't use getRelayEnvironment() in there either. I import it from the createRelayEnvironment file but then I'm not using my App's environment (RelayEnvironmentProvider at the root of my App).
Anyone have success with using Relay in NextJS?
I don't know how I missed this, but I followed along with NextJS's example for using Relay Modern on GitHub.
I didn't do everything the same - I don't have a .babelrc file, for example, because that info is in the next.config.js file (thanks to NextJS 12.1).
What I really used from here was how they were starting and using relay in their relay.js file. Then I used that in a getServerSideProps function in my page just like how they did in their index.js file.
I want to create a Browser-Application without SSR, with React and MUI. So I found a NextJS-Template here:
https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript
I want to disable SSR completely, let's say in the best case starting with _document.tsx, but at least the file _app.tsx and all following as for example _index.tsx should be rendered without SSR.
So, how to disable SSR "completely"?
While some might tell you to use plain React, others still use Next.js because of things like file-based routing, sane ESLint and TypeScript defaults, and fast compilation times (because of SWC). If you prefer the developer experience of Next.js over standalone React, but don't want/need SSR, then you have the option to use a static HTML export:
next export allows you to export your Next.js application to static HTML, which can be run standalone without the need of a Node.js server. It is recommended to only use next export if you don't need any of the unsupported features requiring a server.
The example template you linked to shouldn't need any additional code changes (running next export on it worked fine for me, it only threw a warning about a missing ESLint configuration which is easy to set up).
Just remove the getStaticProps, getStaticPaths and getServerSideProps from the pages you don't want to SSR and it will act like a normal react page.
Svelte’s JavaScript server-side rendering API is described here: https://svelte.dev/docs#run-time-server-side-component-api
However, when I do this in TypeScript, there is no method App.render().
Do I need to change rollup.config.js (e.g. compilerOptions.generate)?
Do I need two versions of this file – one for the server and one for the client?
Can anyone help? Thanks!
Svelte Server-side component API is not directly accessible via import. Instead, you need to build the production with vite options --ssr. Otherwise, you're importing the component class extended SvelteComponent and that class has no render function.
You can check out this guide for Production SSR build: Vite Server-Side Rendering.
You don't need to set up the SSR Dev server or inject /#vite/client because svelte-hmr already does the magic under the hood.
The SSR Bundle options ssr.noExternal doesn't seem to work for me. So that I need to convert all Svelte components import into static import for a production build.
The official template relies on rollup-plugin-svelte, where similar question was asked. Essentially compiling in SSR mode does not automatically generate any HTML, in fact some post processing is required. The Svelte Server-side component API can be used for that.
There are several solutions out there for SSR:
SvelteKit
Routify
ElderJS
I have a Cmd-generated 6.0.2 application that is running at about 200 customers on-premise servers. I would like to allow the customers to select a base color and a text color, (e.g. #c0ffee and #facade), and call an API running on our server (not on a dev PC!), that takes the SCSS, sets $base-color:dynamic(#c0ffee) and $color:dynamic(#facade), generates the resulting CSS and returns that to the customer, where it is stored on the server alongside the app.
It is really easy to implement this by copying the whole project, including the javascript sources, to the server, calling sencha app build production, and then return the content of the generated CSS files. But since it's a server API, I would like to reduce the footprint, by not always compiling and then discarding the javascript, and at best, not even needing the javascript on the server.
It would be really nice if someone could tell me how I can, using sencha Cmd, generate a single SCSS file that contains all styles required for the app, such that I would only have to search/replace in that file the $base-color and $color definition, and how to, after successfully replacing it, call sencha fashion to only generate a single new CSS file from that SCSS file.