I'm trying to create an App that uses Amplify and AppSync with Next.js.
I was able to deploy the application successfully but when I'm trying to access the application (trying to fetch data from AppSync) It is failing.
I'm kinda lost what needs to be looked at, the application seems to be working fine locally but when I'm publishing it on AWS it is failing.
I'm getting error: TypeError: Cannot read property 'getName' of undefined
//quotes.js
import { Connect } from 'aws-amplify-react';
........
<Connect
query={graphqlOperation(queries.getName)}
subscription={graphqlOperation(subscriptions.onCreateName)}
onSubscriptionMsg={(prev, { onCreateName }) => ({
...prev,
getName: {
...prev.getName,
items: [
...prev.getName.items,
onCreateName,
],
},
})}
>
Has anybody come across such an issue or any idea to resolve the issue? Thanks in advance.
Running the subscription when doing SSR is not needed / useful and requires a WebSocket client in the server, you can try Dynamic Imports with no SSR to have the subscription only happen on the client. (using { ssr: false })
import dynamic from 'next/dynamic';
const DynamicComponentWithNoSSR = dynamic(() => import('../components/hello3'), { ssr: false });
function Home() {
return (
<div>
<Header />
<DynamicComponentWithNoSSR />
<p>HOME PAGE is here!</p>
</div>
);
}
export default Home;
Related
I have a simple nextjs 13 application (appDir) with 2 pages and a <Link/> component navigation.
first page Home - static
second page Test - receiving dynamic random content on the server side (fetch) from a third-party source.
Problem: When the application is rendered everything works fine, but when I try to switch between pages, my test page shows the old content, I can refresh the browser to get the actual data, is very similar to navigating through regular links <a/>, but i need without reloading the entire application.
Q: How can I force nextjs 13 to reload the Test page when I switch between pages with <Link/> component?
// src/components/navbar.tsx
'use client'
import {usePathname} from "next/navigation";
import Link from "next/link";
const navItems = [
{text: 'Home', href: '/'},
{text: 'Test', href: '/test'}
];
const Navbar = () => {
const pathname = usePathname();
return <nav className="nav nav-masthead justify-content-center float-md-end">
{navItems.map((item: { text: string, href: string, link?: boolean }, idx: number) => (
<Link key={idx} href={item.href} className={`nav-link${item.href === pathname ? ' active' : ''}`}>
{item.text}
</Link>
)
)}
</nav>
}
export default Navbar;
// src/app/test/page.tsx
import * as crypto from "crypto";
const getData = async () => {
const res = await fetch('http://localhost:3000/random-data', {cache: 'no-store'});
if (!res.ok) {
throw new Error('Failed to fetch data');
}
return res.json();
}
export default async function Page() {
return <p>{crypto.createHash('sha256').update(JSON.stringify(await getData())).digest('hex')}</p>
};
I've recently asked about this same topic on their feedback discussion on github: https://github.com/vercel/next.js/discussions/41745?sort=new#discussioncomment-4620262
The cause of the problem is Link is only doing client side navigation and seems to serve a cached state of the previously visited component. You'll notice that the client never calls back to the server and thus the server component never runs the second time.
I've been searching for days, but haven't found a way to force Link to reload or force refresh the component to re-render.
My conclusion is that if you have dynamic data that needs to refreshed periodically, it's best to render it in a client component and not use a server component for now.
Also, if you'd like to use Suspense, you'll need to use a library like SWR or React Query for any client side data fetching.
I am trying to integrate keycloak with NextJS.
The library that I am using is: https://www.npmjs.com/package/#react-keycloak/ssr
In documentation they said to wrap SSRKeycloakProvider component over the App component in _app.tsx file.
Like this:
function MyApp({ Component, pageProps, cookies }: AppProps & InitialProps) {
return (
<SSRKeycloakProvider
keycloakConfig={keycloakCfg}
persistor={SSRCookies(cookies)}
>
<Component {...pageProps} />
</SSRKeycloakProvider>
)
}
...
MyApp.getInitialProps = async (context: AppContext) => {
// Extract cookies from AppContext
return {
cookies: parseCookies(context?.ctx?.req),
};
};
I have tested it and everything works fine, until I pushed my changes to gitlab and pipeline failed with error message:
Warning: You have opted-out of Automatic Static Optimization due to
getInitialProps in pages/_app. This does not opt-out pages with
getStaticProps Read more:
https://nextjs.org/docs/messages/opt-out-auto-static-optimization
Seems that this will cause that all pages without getStaticProps() method will be server side rendered. How to avoid that?
Should I create one more component which will look similiar like this MyApp(), and wrap it only over the pages that require keycloak authentification? (and then remove that SSRKeycloakProvider from MyApp and at this to that new one)
Using SvelteKit 1.0.0-next.95 to get a JSON array back from an external API endpoint and display in a template like this:
<script context="module">
export async function load({ fetch }) {
const url = 'https://www.schoolhouseyoga.com/api/announcement'
const res = await fetch(url, {
method: 'GET',
mode: 'cors',
headers: {
'content-type': 'application/json'
}
})
if (res.ok) {
return {
props: {
sections: await res.json()
}
}
}
return {
status: res.status,
error: new Error(`Could not load ${url}`)
}
}
</script>
<script>
export let sections = []
</script>
<template>
<section>
{#if sections.length > 0}
<div class="callout">
<h1>Announcements</h1>
{#each sections as section}
<div>
{#if section.announcements.length > 0}
<h2>{section.section}</h2>
{/if}
{#each section.announcements as announcement}
<p><b>{announcement.title} </b>- {#html announcement.description}</p>
{/each}
</div>
{/each}
</div>
{/if}
</section>
</template>
If you try https://www.schoolhouseyoga.com/api/announcement (CORS) in a browser or using curl, you'll get a JSON array with two elements.
When I run this in dev mode, npm run dev -- --open and navigate to this route on Safari 14.1 (macOS), I get a 500 error and the message, "Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin." If I try to navigate to that route on Google Chrome, I get a 500 error and "TypeError: Failed to fetch".
But with either browser, if I refresh the page, the data loads successfully. Navigating to a different route then back again, the error reappears.
I am guessing this has to do with SSR but not sure what to do about it.
Any thoughts?
The problem was related to server-side rendering and a CORS issue with the endpoint. When the server-side code performed the fetch, it worked fine. Subsequent fetches were being performed by the client (which ran into the CORS issue).
While the endpoint appeared to have CORS enabled...
import { Router } from 'express';
import cors from 'cors';
import * as controller from './announcement.controller';
const router = Router();
router.get('/', cors(), controller.index);
But the endpoint was also using helmet and needed
app.use(helmet.permittedCrossDomainPolicies());
prior to loading the routes.
Hope this helps others.
I'm trying to use module federation (webpack 5) beetween nextjs applications.
I started from this example (two nextjs applications) and everything works as expected. From my point of view the problem is that this works only if i have both app on the same host.
The relevant webpack configuration part on next.config.js is below (the same in the other app)
....
remotes: {
next1: isServer
? path.resolve(
__dirname,
"../next1/.next/server/static/runtime/remoteEntry.js"
)
: "next1",
},
...
If i just remove the server configuration it doesn't works.
It is possible to use module federation between nextjs app without configure the remote server by folder path and reference the remote app only by url ?
It is possible, but it won't work with SSR. Just leave the remote with the global for client side:
// next.config.js
....
remotes: {
next1: "next1",
},
...
Create your component and import the remote:
// component.js
const Component = (await import("next1/component")).default
export default Component
And finally in your page, lazy load your remote component with SSR disabled:
// mypage.js
import dynamic from 'next/dynamic'
const RemoteComponent = dynamic(
() => import('../components/component.js'),
{ ssr: false }
)
const MyPage = () => (<RemoteComponent />)
export default MyPage
There's a working sample here: https://mf-shell.vercel.app/
And the code: https://github.com/schalela/mf-nextjs
Problem
Im loading some menu items from the Wordpress Rest API, then navigate to the page/:id with the correct id of the wordpress page. Everything works fine except of that:
Early when my page is loading I get this null call in the network section of the chrome developer. This is locally, on my server its also a 404 NOT FOUND.
Setup
Angular 2 + Typescript (Angular 2 RC2, Router 3.0.0-alpha.6)
Wordpress REST API
Code
Template
<header></header>
<router-outlet></router-outlet>
<footer></footer>
Routing
export const routes: RouterConfig = [
{ path: '/page/:id', component: PageComponent },
{ path: '/page/home', component: PageComponent, index: true }
];
Header.ts
this.myService.getNavigation()
.subscribe(
menuItems => {
this.menuItems = menuItems;
this.router.navigate(['/page', this.menuItems[0].title]);
},
error => this.errorMessage = <any>error);
Main.ts
bootstrap(AppComponent, [
...APP_ROUTER_PROVIDERS,
...HTTP_PROVIDERS,
...ROUTER_PROVIDERS,
...ENV_PROVIDERS,
{ provide: LocationStrategy, useClass: HashLocationStrategy }
])
Assumption
I guess it has something to do with my routing setup. When I comment out the <router-outlet> it does not happen, everything else works good.
Question
What is this strange call at /null and how can I avoid it?
I guess you have somewhere <img [attr.src]="var"> or similar.