menu

Next.js

A place to chat about Next.js and answer questions. For all other ZEIT products, check this out.

Channels
Team
Posts
Chat
Members
Info
Show previous messages

January 24, 2020 at 12:53pm
need some help please anyone?
  • reply
  • like
sorry for the ping. just looking for some help regarding above issue.
  • reply
  • like
what do you mean by scaling SEO?
Hey, I'm asking if there are examples of project architectures showing implementation of SEO on large-scale apps and how that works at scale
  • reply
  • like
hey, people - I'm having trouble following the guide on "SSR and Server Only Modules" (https://arunoda.me/blog/ssr-and-server-only-modules)
  • reply
  • like
newbie here: not sure how that's supposed to work, exactly... if I ignore a module (using IgnorePlugin) that's meant to be loaded server side, I unsurprisingly get a MODULE_NOT_FOUND on the server console
  • reply
  • like
I'm trying to validate a JWT token with jsonwebtoken, BTW
  • reply
  • like
Error: Cannot find module 'jsonwebtoken'
  • reply
  • like
what am I missing?
  • reply
  • like
Hey, I'm asking if there are examples of project architectures showing implementation of SEO on large-scale apps and how that works at scale
mate, that question is so broad, what are you looking for? SEO best practices? localized routes? meta tags?
  • reply
  • like
what am I missing?
for anyone interested in this, I found out that the instructions on the blog post linked in Next.js docs is no longer accurate - more here
  • reply
  • like

January 25, 2020 at 6:53am
I'm new to Next.js. I have looked in spectrum and previous raised github issues but i couldn't get a solution. I'm using styled-components and framer-motion for page transitions.
export default props => {
return (
<ForgotContainer
{...props}
variants={pageVariants}
exit="exit"
initial="enter"
animate="center"
exit="exit"
transition={{
opacity: { duration: 0.3 }
}}
>
<BrandName fc />
<div className="forgot-form">
<ForgotForm />
</div>
</ForgotContainer>
);
};
link to forgot <span onClick={() => Router.push("/forgot")}>FORGOT PASSWORD ?</span>
<Link href="/forgot">
<a>
<span>FORGOT PASSWORD ?</span>
</a>
</Link>
I have tried doing both ways but all that happens is the URL updates, module is fetched as i see it in network tab but the page doesn't load. After a manual refresh it loads but if i go back and try to go forward using browser button it still doesn't load. Is it something specific to styled-components or framer-motion ? or am i doing something? sandbox with minimal reproduced code of the issue
Edited
  • reply
  • like
Not using Next/Link i am suing Next/Router and there i am affixing AssetPrefix to maintain the BASE_PATH in the browser.
I found the solution of this problem, I was not using the as or asPath property to maintain deep URL in browser. So removed assetPrefix from route and affixed it with route value into asPath property on next/router
  • reply
  • like
I'm new to Next.js. I have looked in spectrum and previous raised github issues but i couldn't get a solution. I'm using styled-components and framer-motion for page transitions.
export default props => {
return (
<ForgotContainer
{...props}
variants={pageVariants}
exit="exit"
initial="enter"
animate="center"
exit="exit"
transition={{
opacity: { duration: 0.3 }
}}
>
<BrandName fc />
<div className="forgot-form">
<ForgotForm />
</div>
</ForgotContainer>
);
};
link to forgot <span onClick={() => Router.push("/forgot")}>FORGOT PASSWORD ?</span>
<Link href="/forgot">
<a>
<span>FORGOT PASSWORD ?</span>
</a>
</Link>
I have tried doing both ways but all that happens is the URL updates, module is fetched as i see it in network tab but the page doesn't load. After a manual refresh it loads but if i go back and try to go forward using browser button it still doesn't load. Is it something specific to styled-components or framer-motion ? or am i doing something? sandbox with minimal reproduced code of the issue
Your server side rendering is working but client side rendering is not. May be it has to do with custom _document
  • reply
  • like
this is my custom document
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
)
};
} finally {
sheet.seal();
}
}
}
i have just picked up this file from next's styled-components example folder.
  • reply
  • like

January 26, 2020 at 4:40pm
Anyone has an idea for this question?
  • reply
  • like

January 27, 2020 at 9:55am
Hi, Im getting some strange 404 of static files on production, what can i do wrong please?
  • reply
  • like
most like likely your link href and as props are wrong.
  • reply
  • like
Please, I need one liner help here:
  • reply
  • like
Hey everyone! No one has encountered a problem when the DOM does not match the React? Like this issue
  • reply
  • like
типа о чём речь?
  • reply
  • like
English only, please.
  • reply
  • like

January 28, 2020 at 11:59am
Is there any way to load page always through SSR(from server)?
  • reply
  • like

January 28, 2020 at 8:50pm
Has anyone implemented a sticky footer with nextjs? The surrounding next div id="__next" 'breaks' css grid solutions etc.
  • reply
  • like