I have a project made with React/Next.js.
This is the file directories.
What I am trying to do is have the user GET - /api/grademate/pay and return the success page.
Fetching /api/grademate/pay works without a problem.
The problem is, while testing, the success page does not load when I try to visit it manually.
This is what my index.js file looks like inside the success folder:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../../../../styles/Home.module.css'
export default function Success() {
return (
<div className={styles.container}>
<Head>
<title>Payment Success</title>
<meta name="description" content="Your payment was successful!" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Payment Successful!
</h1>
</main>
</div>
)
}
When I try to visit /api/grademate/pay/success, nothing happens and the page just loads and this error is printed:
API resolved without sending a response for /api/grademate/success,
this may result in stalled requests.
Keep in mind I am new to the world of React and Next.js
In Next.js, the api folder is used for API routes only.
Your normal page components should not be inside the api folder, they should live under the pages folder directly.
For instance, your pages folder structure could look like the following.
pages/
api/
grademate/
pay.js
grademate/
pay/
success/
index.js
_app.js
index.js
Your Success page can then be accessed at /grademate/pay/success.
Related
I'm having trouble getting the apple-touch-icon to work in my NextJS app. I have an image called apple-touch-icon.png at the root of my project and I am using next/Head in my application's app component (React app, but not CRA) using the following:
function App({ Component, pageProps }) {
return (
...
<Head>
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</Head>
...
)
When I inspect my application I can see the tag in the , but dragging from the url bar to my desktop from localhost still shows:
I also see the <link> in the <head> in a deployed instance of my application as well, but the touch icon image is not downloaded to the desktop.
Thoughts?
Just started NextJS version 11.1 and all routes are working first time the website is launched. However when I click on the Home Page/index.js, I get the 404 Not Found. Any help here would be appreciated. Thanks
Here's the index.js code:
export default function Home() {
return (
<>
<Head>
<title>Home Page</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Hero>
<Heading>NEXT</Heading>
</Hero>
</>
);
}
Remove the "/index" from the Link and just add "/"
That is the default route for index.js
I am trying to build a site using react.js and I was able to render the picture but I am not able to view the picture. I need some help. I am creating a website for a client. I am trying to render the image from Header.jsx. The picture is saved in public/Images/Img1.jpg. I have a component folder which as App.jsx, CreateArea.jsx, Header.jsx, Footer.jsx and Navbar.jsx.
[Error with pic
import React from "react";
import NavbarHeader from "./Navbar";
function Header() {
return (
<header>
<NavbarHeader
/>
<h1>SyncTech Solutions- Take your business beyond the four walls. </h1>
<img src = "/Images/Img1.jpg"></img>
</header>
);
}
export default Header;
]1
You need to use
<img src={`${process.env.PUBLIC_URL}/Images/Img1.jpg`} />
for using images from public folder.
process.env.PUBLIC_URL will store your public url... The one which you access with %PUBLIC_URL% in the index.html file.
You could use require or import syntax if your image was inside src folder since it would be processed by webpack then.
But process.env.PUBLIC_URL seems to be the correct option in your case.
Replace your <img> tag with
<Image source={require('./Images/Img1.jpg')} />
I have a wordpress website, and I want to migrate it to Gatsby. I have found a lot of documentation and I now have a working site in Gatsby. But there is something I haven't been able to do: Import the meta tags generated by yoast into Gatsby.
I add yoast_head to the graphql query and I have access to the meta tags and the title in a string, but I don't know how to put it into the header of the page
I tried:
<Helmet dangerouslySetInnerHTML={{ __html: yoastHead }} />
But that did not work
If I do
<div dangerouslySetInnerHTML={{ __html: yoastHead }} />
I can render all the meta tags on the body of the page, but I want them to be added inside <head></head>
I found the way:
https://www.npmjs.com/package/react-html-parser
import ReactHtmlParser from 'react-html-parser'
...
<Helmet>
{ ReactHtmlParser(yoastHead) }
</Helmet
...
I am making a static website and using Gulp to process all the files.
Static HTML
Firstly I had a bunch of static HTML files each with the content for the page. Example index.html:
<p>Home</p>
Then I had a layout.html file with HTML that is the same for each page. It looked like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="assets/styles.min.css">
</head>
<body>
<div id="contents">
<%= contents %>
</div>
<script src="assets/scripts.min.js"></script>
</body>
</html>
Then, in the gulpfile, I would process the pages using the gulp-wrap plugin like this:
gulp.task("html", () => {
return gulp.src(["html/**/*.html", "!html/layout.html"])
.pipe(wrap({ src: project.layout }))
.pipe(gulp.dest(project.build));
});
And this, as expected, created all the HTML files as required.
Using React
Now I want to use React. So in my main script that gets included into every page I wrote this:
import React from "react";
import { render } from "react-dom";
render((
<p>This would be some Page component...</p>
), document.body);
This, of course, replaces the body content of every page, so I turned to the react-router:
import React from "react";
import { render } from "react-dom";
import { Router, Route, browserHistory } from "react-router";
render((
<Router history={ browserHistory }>
</Router>
), document.body);
I guess this would work (after putting some routes into the router, of course), but what are the HTML files for?
Questions
How do I use the HTML files? Will I just leave them empty so that Gulp generates the same HTML file layout.html everywhere it's needed? (Or something equal to copy the file...) I need some files there so that routes like site.me/about work. This would leave everything up to the router.
Do I render a page-specific component in every page HTML file? This means having something like this in the index.html file:
<script>render(<Index />, document.body);</script>
Some other react-router wizardry?
How would you do this?
What I've done in this case is to have just one single HTML file that has the application in it. I then set this file up on the server to always be loaded irrespective of what the actual request path is.
Once that's done, reading the path on React Router and showing the correct components happens as usual. The key is that all routes load the same HTML page and the routing (deciding which component to show where and which props to load into it) happens inside React Router.