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
Related
I am making a react app. But in the title bar, it is showing 'React App' with React logo. I want to change it to my website name and logo, and how can I do that ?
If you want to change the title, you can go to: public/index.html, and then change the <title>React App </title>
To change your logo, go to the public folder and change the favicon.ico.
If you follow these steps, your logo and title will get changed.
If it helps you, please mark as accepted answer.
you can change title and icon on public/index.html in react project.
<head>
...
...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React App</title>
...
...
</head>
Making changes in public/index.html would only change the default values (title and favicon), and it will be set for all pages. More on this method and some (complex) alternatives in the official docs: https://create-react-app.dev/docs/title-and-meta-tags/
...or you can use React Helmet, a third-party library recommended in the official docs as well: https://github.com/nfl/react-helmet. It will allow you to set page title/favicon/other head elements from the components itself.
Example code using React Helmet:
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://example.com/example" />
</Helmet>
...
</div>
);
}
};
You can change your page title by doing something like this.
const pageTitle = `${title}`;
Then:
document.title = pageTitle;
you can change the logo from ./assets/index.htm and change the href.
and input your image to ./assets/
TypeError: Cannot read properties of null (reading 'insertBefore') is shown when using filepond on nextjs, works fine when using reactjs
The Page Error: here
My Code:-
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { FilePond } from 'react-filepond';
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<FilePond/>
</div>
)
}
To Recreate the error simply create a fresh nextjs app then, include the libraries 'filepond' & 'react-filepond' then just use the Filepond Component as in the code above.
I'm trying to add font to my website through Nextjs in a React component but getting the following error :
Mixed Content: The page at 'https://example.com/page/subpage' was loaded over HTTPS,
but requested an insecure stylesheet 'http://allfont.net/cache/css/bookman-old-style-bold.css'.
This request has been blocked; the content must be served over HTTPS.
I'm not sure why I'm getting this error since I'm making a https request via the Head like so:
import Head from "next/head";
export default function page() {
return (
<Head>
<link
href="https://allfont.net/allfont.css?fonts=bookman-old-style-bold"
rel="stylesheet"
type="text/css"
/>
</Head>
)
}
<link rel="preconnect" href="https://allfont.net" />
<link
href="https://allfont.net/allfont.css?fonts=bookman-old-style-bold"
rel="stylesheet"
type='text/css'
/>
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.
I have been trying to add facebook feed to a gatsby website that I'm working on and it doesn't seem to work!
I've tried to add the scripts in gatsby-ssr.js
const React = require("react")
exports.onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<div id="fb-root"></div>,
<script
async={true}
defer={true}
crossOrigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1"
></script>,
])
}
then in component
<div
className="fb-page"
data-href="https://www.facebook.com/TechnoBondCo/"
data-tabs="timeline"
data-width="400"
data-height="400"
data-small-header="true"
data-adapt-container-width="true"
data-hide-cover="true"
data-show-facepile="false"
>
<blockquote
cite="https://www.facebook.com/TechnoBondCo/"
class="fb-xfbml-parse-ignore"
>
<a href="https://www.facebook.com/TechnoBondCo/">
تكنوبوند - صناع الكلادينج Techno Bond
</a>
</blockquote>
</div>
but it didn't work, I also tried to use react-facebook but I cant seem to change the width or height of the iframe
any idea how to do this?
ERRORS USING REACT HELMET
I get this console error:
- warn "export 'default' (imported as 'Helmet') was not found in 'react-helmet'
and get this browser error:
You need to use <Helmet> tag, like this:
<Helmet>
<script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
</Helmet>
You can check for further information about Gatsby's Helmet, and React Helmet, but basically, <Helmet> component allows you to insert a few code that will be placed after compilation inside the <head> tag.
You can use it in any component, for example, in IndexPage component it would be:
import { Helmet } from 'react-helmet';
const IndexPage = () => (
<Layout>
<SEO title="Live" />
<Helmet>
<script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
</Helmet>
I've tested in my local machine it loads perfectly as it shows the following screenshot: