How can I transfer image data between next.js pages - javascript

I'm working on an Instagram clone (Just because I want to learn more about Next.js) and I want to manage the image uploads. Just want the user to upload his image and redirect it to the "create new post" page. The thing is, I don't know how to send the image between pages. I thought of doing a rest API to temporarily store the image and retrieve it, but that seems to be far too complicated. Does anyone have any idea of how I can implement this? I'm using Router from next.js if that helps.

Multiple ways depending your needs. You can try one of these.
Use React Context or a state management tool.
When routing from Page A to Page B, pass your data with querystring. Mask it with "as" prop if you dont want it to be shown on URL. If data is too big; pass it as a Blob URL. Then read query on the second page.
https://nextjs.org/docs/api-reference/next/router#routerpush
Use localStorage. This is probably shortest way.

Related

NextJS How to create dynamic backend routes

Is there away for me to create dynamic backend routes? I am creating and image host. I am wanting the user to be able to get their image saved on the server under a domain like this http://localhost/<random_id> and example of the link would be http://localhost/a3Fafght5, I have looked around online and I could not find anything about creating dynamic backend routes and then when I did find one thing it said I needed to use getStaticPaths to declare all the possible ids. I dont know what the id is going to be when I build the project, I need to be able to query the database with it and check if it exists and do things from there.
You can use dynamic page routing if you have file like pages/[imageId].js
and then simply put getServerSideProps in your file which can call your database and determine if this is valid ID or not. For valid ID your would return image, for not valid simply 404.
If you don't want to have server-side rendering, but static one instead. You could have the same file as above and have getStaticPaths function which would query the database and return array of all possible IDs. This however could be issue if you have a lot of images, then the server-side solution would be easiest.

How do I allow users to create new pages and save them serverside?

I am currently building a personal wiki and I'm having difficulty in creating new article pages without coding them or pasting a blank template.
I've tried DOMImplementation but it's not quite what I'm after, I just want to be able to press a button and a new page is created serverside which I can write in and save, I've looked around on the internet a lot but I keep going in circles.
If anyone can point me in the right direction or show me how that would be awesome.
I also have another problem of including a link to the new file on the index but I could try to sort that out on my own.
Any help is greatly appreciated, thanks.
What you are looking for is probably dynamic pages.The general idea is:
You provide an interface on the frontend for the user to type in the content of the page.
When the content is submitted to the backend, it is saved to a database and it's id is returned for someone to visit the page later on.
On the backend, you create a new endpoint that expects an id, with said id, you query the database and get the contents saved previously.
This fetched content is used to populate a html template and this html is returned as the response to the frontend

How can I suppress 404 error when a file is not found?

I have a list of webpages example.com/object/140, example.com/object/141, example.com/object/142, ...
and each page should have a particular background image example.com/assets/images/object/140.jpg, example.com/assets/images/object/141.jpg, ...
Some images are missing and then I use a default image. In that case, when I check if the image exists, I get a 404 error. I have already seen in several pages there isn't a direct way to avoid this problem.
Then I did the following: I created a service in the backend (C#) that checks if the file exists File.Exists(fileName);. That way I managed to avoid this error in my localhost. So far so good.
Now I published both my frontend and backend in two different services in Azure. The images are in the frontend but the file service is in the backend. My method does not work anymore because I can't access directly the frontend folders from the backend. One solution could be to make an http call from the backend to the frontend, but I think this doesn't make much sense, it's getting too messy.
One option could be to store in the DB a boolean with the (non)existence information, but I think this is prone to inconsistencies (if the boolean is not updated immediately when a new image is loaded or deleted, for example), even if I run a daily job to clean it.
Still another option could be to store the images directly in the DB and retrieve them together with the DTOs of the objects I'm loading in each particular page, but I guess that images that are shown only in the frondend should be stored in the frontend... shouldn't they?
Therefore:
a) Is any of these ideas acceptable? Is there a better way to avoid this error?
b) Another possibility: is there a way to access the frontend folders from the backend? I get a bit lost with the publishing and artifacts in Azure and I don't know if I could do it somehow.
I'm not sure how you've built the frontend, but I'm assuming that the background images are set using CSS. It is possible to set multiple background images in the same rule, and the browser will load them all and display them one below the other - if the first one loads successfully, and isn't transparent, then that is the only thing the user will see. But if the first image fails to load - for example because it doesn't exist, the second image will be shown.
See this other answer for more details: https://stackoverflow.com/a/22287702/53538

Modify current URL (Gatsby / Reach Router)

Question: Is it possible to modify the current URL that's shown in browser's address bar and browser history?
To be specific, I only want to modify the URL that is visible to the user; I don't want to trigger navigation. (I have a Gatsby app, and Gatsby is using Reach Router.)
Motivation: I have a gallery of images that the user can click and navigate to URL such as /images/?id=52. The advantage of this approach is that /images/ can be prefetched to enable instant rendering of the page. However, this scheme is unfriendly to users who have disabled JS, as they will see no images at all when they navigate with query parameters. So I have also prerendered pages like /images/52/ that work without JS. So what I want to do is navigate the JS users with query parameters, but then modify the URL that they see to a URL that can be shared with anyone including non JS users.
What I think you're looking for is either window.location.replace() or window.location.assign()
Replace is merely visual, so if the user were to copy the URL to share with their friends you can manipulate that url that they see and copy.
Assign loads a new document, as if the URL you passed it is the one that got the document.
https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
https://developer.mozilla.org/en-US/docs/Web/API/Location/assign
Edit: a comparison
Difference between window.location.assign() and window.location.replace()
I believe you'll need to create a NodeJs server to handle this sort of action. It can take a query parameter from the URL ('images/?id=52') and then return the user to the URL 'images/52'.
Or you may be able to use the 'gatsby-source-filesystem' package.

Host multiple pages in one page

I want to know How to have pages like YouTube's watch page, http://www.youtube.com/watch?v=abc123 ?
I need it to do the following:
when just going to the main file watch.php, I want it to :show certain code for when they go to that page,
when they go to example /watch?v=abc123, I want it to : show different code only for that link.
I also don't want the main watch.php page to be all cluttered up with code as I'll be at nearly 50+ times using these ?v= I heard you can use Databases but I don't know.
Just whichever ones the best and easiest to make also please try and get it not to be clustered up and easy for me to edit. Thank you
Please Edit this if needed. My website and page i'll be using
This is only available via php. Using $_GET method.
Basically, the link is only www.mysite.com/watch.php. But if you use watch.php?v=123 then the $_GET['v'] will have the value of 123.
For more info: http://www.php.net/manual/en/reserved.variables.get.php
EDIT: basically your step would be like this
Set up a database. This depends on where you host your site. But most host service allow you to create and manage database.
Create a table with values you wanted to store.
Get the "v" value through $_GET
Run queries to connect to the database, and get the stored value. Ue echo to print it out on HTML

Categories

Resources