Next Js css is loading only at home page not in other page if I go the url directly .
when I go to homepage css loads
https://www.kachuwa.com
It also load if it push through router:
router.push({
pathname: '/shop/nosidebar/list',
query: {
searchTerm: 'shoes',
},
});
but going to url directly it won't load the css:
https://www.kachuwa.com/shop/nosidebar/list/?searchTerm=shoes
what can be the issue
Create _app.js on your root folder
Import your CSS inside _app.js like this
import "../styles/globals.css";
Copy this code into _app.js
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp;
Check these links below to understand better:
what is _app.js
How to use css on _app.js
Related
I just deployed a TinaCMS page on github pages using github actions. It seems to work fine except on initial access to the root URL. On this initial load, Nextjs renders a 404 error page with a link 'Return to home'. When clicking this link, the browser's URL is still the root URL and the home page is rendered correctly.
when I access a sub page like example.com/posts directly, the page is rendered correctly.
when I do a build and export locally and open the files using a local nginx server, the home page is rendered correctly on initial access.
in my next.config.js a have the following:
async rewrites() {
return [
{
source: "/",
destination: "/home",
} ...
so what could the problem be in conjunction with github pages?
the complete source code is here: https://github.com/mtnstar/web
the page is accessible on https://mtnstar.net
I found a temporary fix, although the 404 page is flashing up for a second and then the right home age is rendered.
so I added a useEffect hook to initially redirecting to the browser current url.
import React from "react";
import "../styles.css";
import { useRouter } from 'next/router'
const App = ({ Component, pageProps }) => {
const router = useRouter();
React.useEffect(()=>{
router.push(window.location.href)
},[])
return <Component {...pageProps} />;
};
so another way to permanently fixing this would be appreciated
I was trying to migrate my nextjs application to app directory, but I found a weird behaviour.
When I have a route in the pages folder like this:
// `pages/test/[slug]/index.tsx`
export default function Page() {
useEffect(() => {
console.log('mount')
return () => {
console.log('unmount')
}
}, [])
return <>
<Link href="/test/1">1</Link>
<Link href="/test/2">2</Link>
</>
}
if I change the page by clicking one of the links, the slug changes, but component doesn't remount. However, when I move this file to app/test/[slug]/page.tsx and mark the file with 'use client';, clicking the link unmounts page component and then mounts it again.
Is this expected behaviour? If so how can I achieve behaviour from pages directory in app?
Whenever I write a useEffect() inside a component function of my block plugin, the edit page goes blank and the console logs the message:
react_devtools_backend.js:4026 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.it (react-dom.min.js?ver=17.0.1:9:43163)
at e.useState (react.min.js?ver=17.0.1:9:10899)
at Prompt (Prompt.js:5:35)
at N (element.min.js?ver=3dfdc75a0abf30f057df44e9a39abe5b:2:9552)
at U (element.min.js?ver=3dfdc75a0abf30f057df44e9a39abe5b:2:10502)
at N (element.min.js?ver=3dfdc75a0abf30f057df44e9a39abe5b:2:9284)
at lr (blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:111294)
at blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:137935
at xn (blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:138073)
at blocks.min.js?ver=658a51e7220626e26a92a46af5c2e489:3:139086
The component:
import React, { useState, useEffect } from "react";
import axios from "axios";
function Prompt(props) {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios(
"http://my-site-test.local/wp-json/wp/v2/posts?_fields[]=title"
);
setData(result.data);
};
fetchData();
}, []);
console.log(data);
return (
<>
JSX...
</>
);
}
export default Prompt;
I tried to delete node_modules and reinstall to no avail…
I believe the problem is in my-plugin/src/index.js — wp.blocks.registerBlockType's 'save' property only allows static HTML to be returned (so it can be stored in the database within the content) and I was trying to insert a React component into it.
Since I want a dynamic block on the front-end, I have to load a register_block_type in my-plugin/index.php to render my component.
EDIT You actually can add React directly in the save attribute if you have specified script when registering your block in the PHP main file (or in your block.json file.
This code is in a page file in NextJS. Although I'm not using getStaticProps or getServerSideProps it still performs server side rendering.
Is this by design? The docs would imply that these get functions are required: https://nextjs.org/docs/basic-features/data-fetching
import React from "react";
import Head from "next/head";
import Link from "next/link";
import { ApolloProvider } from "#apollo/react-hooks";
import ApolloClient from "apollo-boost";
import { gql } from "apollo-boost";
import { useQuery } from "#apollo/react-hooks";
const client = new ApolloClient({
uri: "https://48p1r2roz4.sse.codesandbox.io",
});
const EXCHANGE_RATES = gql`
{
rates(currency: "USD") {
currency
rate
}
}
`;
const Home: React.FC = () => {
const { loading, error, data } = useQuery(EXCHANGE_RATES);
if (loading) {
return (
<div>
<p>Loading</p>
</div>
);
}
if (error) {
return (
<div>
<p>Error</p>
</div>
);
}
return (
<div>
<ul>
{data.rates.map((item) => (
<li key={item.currency}>
{item.currency} - {item.rate}
</li>
))}
</ul>
</div>
);
};
export default () => (
<ApolloProvider client={client}>
<Home />
</ApolloProvider>
);
Production mode
The page provided has no getInitialProps or getServerSideProps. It's statically optimized (pre-rendered at build time).
So, when you request this page in a browser, you will see a pre-rendered HTML content in the response. Disabling JavaScript does not affect it.
If you navigate to the page by using client-side next/link or router the page will be rendered at client-side without making a request to a server.
Development mode
In Development mode this page would be both - server-side rendered and client-side rendered.
If you'd request the page by typing address in a browser it will be pre-rendered at server-side.
If you navigate to the page by using client-side next/link or router the page will be rendered at client-side without making a request to a server (you will see only Webpack Hot Module Replacement request).
I am very excited with ES2015 modules in Meteor 1.3. We have written an app with medium complexity with Meteor 1.2. As we have very large number of templates and files, it is taking a bit of time to download the content on client side. so I am interested in the lazy loading feature using import. From the meteor night talk, they say that the Blaze templates are still global and cannot be imported (or lazy loaded), I have tried using React inside Blaze.
Added react-template-helper package using meteor add react-template-helper
Create imports folder and added testComponent.jsx file which exports 'TestComponent'
//testComponent.jsx
import React from 'react';
export default class TestComponent extends React.Component {
render() {
return (
<div>
<h1>TestComponent</h1>
<div>This is from Test Component</div>
</div>
);
}
}
After in the Blaze template outside imports folder,
<!-- homeReact template html-->
<template name="homeReact">
<div>
{{> React component=TestComponent}}
</div>
</template>
In the template's js file which is also outside of imports folder
// homeReact template js
import { Template } from 'meteor/templating';
import TestComponent from '/imports/testComponent.jsx`;
Template.homeReact.helpers({
TestComponent() {
return TestComponent;
}
});
This worked but the imports/testComponent.jsx is downloaded on the client (checked using chrome dev tools - sources tab), even if the current route doesn't require homeReact template.
Then I have used require instead of import like this,
// homeReact template js
import { Template } from 'meteor/templating';
Template.homeReact.onCreated(function () {
this.TestComponent = require('/imports/testComponent.jsx').TestComponent;
});
Template.homeReact.helpers({
TestComponent() {
return Template.instance().TestComponent;
}
});
This code also downloads the imports/testComponent.jsx file but in addition I also got an error
In template "homeReact", call to {{> React ... }} missing component argument.
So, my question is, is it possible to lazy load (download) files only when required?