next.js

Is it possible to take HTML/JSX content from an external source and render it in dynamically in React? In our case we want to take content from the Wordpress API and render it on both the client and the server (we're using NextJS) So, the Wordpress API returns a JSON response which includes a content property which is a string of HTML/JSX. the content would look something like this. { content: "<div><Slider imageCount="5" galleryID="1"></Slider><span>This is an image gallery</span></div>" } So, as you can see it would be a mix of HTML and React components/JSX, represented as a string I would

When I try to import SVG Image then the following error shows. Which loader I have to use for importing SVG images? ./static/Rolling-1s-200px.svg 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><filter id="b"><feGaussianBlur stdDeviation="12" /></filter><path fill="#817c70" d="M0 0h2000v2000H0z"/><g filter="url(#b)" transform="translate(4 4) scale(7.8125)" fill-opacity=".5"><ellipse fill="#000210" rx="1" ry="1" transform="matrix(50.41098 -3.7951 11.14787 148.07886 107

When I click on a link in my /index.js , it brings me to /about.js page. However, when I'm passing parameter name through URL(like /about?name=leangchhean ) from /index.js to /about.js , I don't know how to get it in /about.js page. index.js import Link from 'next/link' export default () => ( <div>Click <Link href={{ pathname: 'about', query: { name: 'leangchhean' }}}><a>here</a></Link> to read more</div> ) Get it by using below code in the about.js page: // pages/about.js import Link from 'next/link' export default ({ url: { query: { name } } }) => ( <p>Welcome to About! { name }</p> ) url

I started a project based on https://github.com/zeit/next.js/tree/v3-beta/examples/with-firebase The error I have when importing firebase in more than one component. In this firebase start file: import firebase from 'firebase' const firebaseConfig = { apiKey: "fdsfsdfdsf", authDomain: "fdsfdsfsdfdsf", databaseURL: "sdfdsfdsf", projectId: "dsfdsfdsf", storageBucket: "dsfdsfdsf", messagingSenderId: "dsfdsfsdfdsf" } const FbApp = firebase.initializeApp(firebaseConfig) export default FbApp.auth()` Then in the components: import firebase from '../lib/firebaseClient' With a single component works

When using Next.js, I want to show a modal based on a url, on top of another page. If gallery.js is the page component, I want /gallery/image/1232132 to display a modal with an image, on top of the gallery page. Is that possible? If I understand your question correctly you want to add deep links to the individual gallery items. This is possible, but you need a custom server to handle custom routes. The first thing you need to do is setup the routes. I shared an example here: using React router with Next JS route . const nextRoutes = require('next-routes'); const routes = (module.exports =

I'm using next.js for my React app because it has server side rendering. As I checked by log, both methods ComponentWillMount and getInitialProps both run on server side. So my question is: Are there any differences between those method ? When should I run in ComponentWillMount and when should I run in getInitialProps . I don't see Next.JS mentions about this thing. GetInitialProps GetInitialProps is a usually an async function which is good for asynchronous operations at the server and passes data to the page as props. In nextJs it always runs at the server, if the page is called using Link

I know this misses the point of using Cloud Functions in the first place, but in my specific case, I'm using Cloud Functions because it's the only way I can bridge Next.js with Firebase Hosting. I don't need to make it cost-efficient, etc. With that said, the cold boot times for Cloud Functions are simply unbearable and not production-ready, averaging around 10 to 15 SECONDS (WTF?) for my boilerplate. I've certainly watched this video by Google ( https://www.youtube.com/watch?v=IOXrwFqR6kY ) that talks about how to reduce cold boot time. In a nutshell: 1) Trim dependencies, 2) Trial & error