I have recently downloaded the trial version of ChartIQ SDK from here and it is working fine on a React project. But when i switched to Next.js, some features are not usable anymore.
I'm facing three problems on my Next.js project.
CIQ.Studies is undefined so I cannot add studies to my chart.
Also stxx.changeVectorType is undefined so I cannot use drawing tools.
And only candleSticks , mountain and line types are available.
I am using the same chartiq-8.3.0.tgz file both on my React and Next projects and it is all working fine on React but I am experiencing what I just said on Next.js. Can anyone help with me with possible solutions on that?
Nextjs load libraries on server side, where CHARTIQ is client library that works with document object on the browser.
You need to import the libraries with SSR (Server Side Rendering) disabled
doc : https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
I contacted chartIQ technical support. And the solution is to include advance.js instead of chartiq.js
Related
I have recently been learning Next.js for React and I like the routing system a lot more than react navigation. Now I am about to start a react native frontend and I was wondering if you can utilise Next.js's routing system in react native as well as it's other benefits. I know that you can use it with expo but I am a little confused as to how it all works and I am starting to wonder if the Next only works on the web side of things..
Does anyone have any experience with this? Any information would be much appreciated.
Thanks!
Unfortunately you can't do such thing, due to the fact that the views of react native are Equivalent to native views in Java or Objective C. When you get build version of react native , you are receiving Java or Objective C native views thank to react native's RN bridge. Meanwhile, when you get build version of your Next.js project, you are going to receive HTML, CSS, JS and these codes are not familiar to native platforms.
However, you can use your Next.js backend as your endpoints and fetch data in react native via calling this endpoints.
UPDATE Oct_2022:
there seem to be a new tool created for this purpose , called solito. I haven't used it personally but it might meet your needs.
UPDATE Jan_2023:
It looks like there are more Tools being created for Both web and native platforms , check react-native-web
You can check out Tauri. With that you can create from Next.js, React, Svelte etc. cross-platform native Apps. Currently, Windows, Mac and Linux are supported stable. Android & iOS is currently in Alpha
The magic behind Tauri is, that they provide around your Frontend library/framework a Rust layer with that you can interact with platform native APIs. They call it Commands.
You can find the guide for Next.js here.
Also, if it's not exactly answering the question - "Is it possible to use Next.js in React native?" - I hope that it's helping everyone who is searching for a solution to use Next.js as Cross-Platform Frontend Framework
I read a thread on ycombinator on this where Solito was mentioned and tried it out. In the comments I found this, which suited my needs best :
https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter
Solito looks nice but the all in one repo was using Expo, which I did not like because it installs an extra app. I would check it out for yourself and look at the repo above too, which is using Capacitor and is aimed at having one codebase for the two apps.
Both examples worked well. For Tauri I could not find the mobile support so I didn't try it. I would be interested to read more about people's experience with running a minimum stack for cross platform development.
Note : Solito uses React Native, the repo uses Capacitor instead, which may also suite your needs because it works on both iOS and Android.
There's a lot of support now for this tech stack. Besides solito, which is already mentioned, there is also https://tamagui.dev/ which tries to solve all the issues with react-native-web and Next.js along with Solito.
While they currently recommend a monorepo (which adds a lot of complexity in my opinion), I'm playing around with a vanilla React Native + Next.js here: https://github.com/criszz77/luna
This command should get you started to play around:
npx react-native init MyAppName --template #criszz77/luna
I am writing my bachelor's thesis on cross-platform applications for transport management systems.
The idea is to create a React Native application with OpenTripPlanner. I have found this - https://github.com/opentripplanner/otp-react-redux and am wondering if it would be possible to open the example application through React Native on iOS and Android, possibly even web. I have opened it through WEB right now with the steps described and everything works perfectly.
Because I am very new at this, could any of you maybe help me with this? What would I need to do to open / develop the example application with React Native.
Thank you in advance. :)
Its React project, its not possible to open this project in React Native.
The suggestion is to create the react native project and then implement the code by referring the code from example library.
It might be a stupid question to ask, but searching on the web did not give me any conclusive result: If you want to maintain only a single code base, does it make sense to write your code in React and transpile to React Native? A client has the idea to have both an App (ideally for iOS and Android at the end) and a website all deduced from a single source.
I have some experience with webpack and I know it can be painful to configure, but is there some definite guide by Facebook on that issue which I missed?
References
Medium article by Sahil Sharma from 2016
Medium article by Gwendolyn Faraday from 2017
What is the difference between React Native and React?
One alternative is to run your react-native application on the web.
The go to library for that is react-native-web.
salam;
We developed a PWA based on react-boilerplate. it's totally based on webpack.
now I'm supposed to implement SSR on this application. the problem is that , I can't find any suitable solution on converting current project to SSR.
I tried nextjs but integration with project is not possible. additionally its requirement for changing infrastructure is too much.
I tried some other libraries such as react-snapshot and ... but each of them has some specific issues.
any body can help me?
In an article I read that
React uses server-side rendering.
But in another articles I came across this:
Client-Side-Rendering is a relatively new approach to rendering
websites, and it didn't really become popular until JavaScript
libraries started incorporating it into their style of development.
Some notable examples are Vue.js and React.js
Now Which statement is correct?
When I use create-react-app and run npm start, it seems to me that React uses the Client-Side-Rendering. isn't it?
It’s client side. But React, like some other client side libraries, can be used on the server to prerender it with node, usually for SEO.
Out of the box it renders on the client side.
But, if you have a requirement to render pages on a server, you can achieve this with:
Next.js or
Hypernova or any other tool (there is a bunch of them nowadays!)
Note, that SSR will require a bit more experience than a regular React app.
The main goal of this approach is to allow search engine robots crawl information form web pages(SEO).
create-react-app uses client side rendering by default. There are some tools like next js and gatsby js which pre-render pages on the server side. You can also do Server Side Rendering from scratch.
A few years on from the last answer, it is now quite difficult to implement a client-only React app - serving it on Node is trivial and absolutely what it expects, trying to use it as a client library with other server-side support is more of a challenge and documentation about how to do this is patchy and much of it out of date.