I'm currently working in a multi-language application with Next.js that I intend to host in an S3 bucket.
In this site, I need to maintain an application state across routes, by doing client-side routing from one route to another.
Since I need to support 40+ languages and internationalization, the process to do so is the following:
In next.config.js, use exportPathMap to generate /[language] routes with a variable inside "query" that contains that particular locale for the language.
Load this locale in getInitialProps of _app and pass it down with a Provider, to be consumed in any part of the application using the context API.
To support client-side routing, I've wrapped the next/link component in a custom Link that passes down all props and sets the "as" prop to "/[language]/[route]".
This solution works for now, but ideally, I wouldn't need to "mock" the routing with the "as" prop. I have found that dynamic routing in next does not allow client-side routing in a way to avoid refreshing the page to a new .html file that matches the dynamic path.
E.g:
Using the following directory structure:
/pages
index.tsx
/[lang]/
home.tsx
dashboard.tsx
From index.tsx, clicking on a link from next/link that redirects to /en/dashboard will trigger a request to the server and refresh the page completely. Thus, losing the client state.
Is there a better solution for this? It seems like a very common problem to solve, yet I cannot find an elegant solution using Next.js.
Related
What is the need of showing different URL path in react application, I can display all the react component conditionally on same URL path
What is the need of showing different URL path in react application, I
can display all the react component conditionally on same URL path
While you could render a single React app component that conditionally renders dynamic content without using the URL path, using routing/navigation libraries like react-router allow the app to do this conditional content rendering based on the URL. In other words, instead of using internal conditions to render dynamic content the app is using the URL.
React apps are essentially Single Page Apps (SPAs), meaning when the React app is hosted on a server only the single root index.html file is requested and sent over the wire.
A single-page application (SPA) is a web application or website that
interacts with the user by dynamically rewriting the current web page
with new data from the web server, instead of the default method of a
web browser loading entire new pages. The goal is faster transitions
that make the website feel more like a native app.
Using different URL paths in the browser's address bar is an easy way to let the React app know what "page" the user is really trying to access. If all the user enters is "https://yourDomain.com/app" where the app is hosted, then how would they get to any specific page after the initial page load other than navigating there via the app's navigation? The URL path is what allows direct navigation via a browser, e.g. "https://yourDomain.com/app/login".
If I did understand you right you mean the use of different URLs on the same website for different pages of your website. If thats the case you want to use a libary for routing. I personally like React-Router-Dom, there is great documentation on online pages and Youtube. Just search vor react-router-dom v6.
You can add it like so: npm install react-router-dom
if not, please elaborate your question further
In my Next.js application, I'm having the well-known problem of being able to navigate via <Link> to dynamic routes, but when I refresh that page, I get a 404 error since the page was rendered client-side. The app is serverless, so a custom server isn't an option, and the paths I need can indeed be fetched from an API, but that API requires token authentication first so I can't populate the paths I need to pre-render with getStaticPaths either. This app is dynamic, and the pages I'm trying to access through dynamic routes use a lot of Client-Side Rendering anyways, so I don't have a problem with pushing rendering over to the client. I just need to know how to do that if that's the solution, and those two solutions (custom server and getStaticPaths) are the only two I've been able to find.
EDIT: I also use next export to deploy.
TLDR;
a middleware to nextjs like express where I only define it once and it'll automatically applies to all of my routes
I want a middleware style like we have in express I'll define a middleware inside the server.js(entry file) and the middleware will apply to all the routes without any other work needed. well I need similar thing to NextJs
these what I've been tried and used for a while
1: Using High Order Component (HOC):
I don't like this approach because of these drawbacks
Using HOC will disable fast-refresh functionality which's is really nice future to have More Info Here
I have to import my middleware in every api route file which is really not fun to do and wrapping your api files in a function is not a thing to remember all the time
2: using next-connect
I don't like to use this package due to these drawbacks
The nextjs ways to handle api routes seem more natural since i use nextjs i want to still use the nextjs way to handle my routes. not totally different style just for sake of a middleware
same as the HOC I don't like to import nc and my-middleware in every api file
well why not just using a custom server like express? the thing is when i use nextjs I want to only use nextjs also using a custom server will lose so many cool future of nextjs which's is partially why I use nextjs
You can implement _app.tsx, which will run for all pages, though it has some drawbacks too like disabling automatic static generation.
Another option is to implement a custom server using express itself, as shown in this example
I'm currently developing a React SPA with a Spring Boot backend API.
For one use case i need to create a dynamic link which contains login credentials for a one-time-User. With this link a user needs to be able to login to the SPA and use it further from outside the application.
This is the first time I'm working with a SPA.
What is the best way to achieve this goal?
I would really appreciate some ideas.
best regards
You probably need to use a Router (like React Router). These cause different components to be rendered in React depending on the current URL, and from there different code can be run (likely from event handlers or useEffect if you're using function components).
I have a web app developed in reactjs using typescript in which one of its component is user profile. Now the state for this user profile page gets assigned by an api call on the client side. This state is also used to assign some of the contents of the meta tags. I have used helmet for this purpose. But it does not work if the meta tags are going to be dynamically rendered. I have a dynamic url(www.MySPA.com/{username}) and whenever I share this url the meta tags shall get rendered. Can anybody suggest me some typescript definition libraries which i can use in my react web app to achieve this?
Note: I have already tried prerender, react-meta-tags, prerender.io, snapshot, etc but no typescript definitions are available for this libraries