nextjs router locale undefined - javascript

I have done a lot of research and tried many things, but unfortunately, I haven't found a solution, so I had to ask again.
I am working locally on a project and now I want to add Internationalized Routing from nextjs to my project so that I can offer it in 2 languages... I read the documentation of nextjs and watched youtube tutorials and tried but it always comes back in locale:undefined and unfortunately I don't know why?
below you can see my codes... Can you maybe tell me what I am not doing right? or what I am doing wrong?
index.tsx
export default function Home({ posts }: Props) {
const router = useRouter()
const t = router.locale === 'de' ? de : tr
console.log(router)
return (
<Header />
<main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
<h1 className="text-6xl font-bold">
{t.title}
<a className="text-blue-600" href="https://nextjs.org">
Next.js!
</a>
</h1>
<div>
<Link href="/" locale="de">
<a>DE </a>
</Link>
<Link href="/tr" locale="tr">
<a>TR</a>
</Link>
</div>
)
next.config.js
/** #type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
i18n: {
locales: ['de', 'tr'],
defaultLocale: 'de',
},
}
locales/de.js
export const de = {
title: 'Welcome to ',
}

Try this
export default function Home({ posts }: Props) {
const router = useRouter()
let t = "";
useEffect(()=>{
t = router.locale === 'de' ? de : tr
},[]);
return (
</>
Your Other Code ...
</>
)

Related

How do I fix the Remix Error: useFetcher must be used within a data router?

I'm new to Remix (and backend programming in general) and feeling lost troubleshooting this. I'm trying to UseFetcher to allow for non-navigational data mutations in a "todo-like" application. Remix docs doesn't explicitly say I need to be using it within a data router, and the examples don't clear up my confusion at all.
Here's what my App component looks like in root.tsx:
export default function App() {
return (
<html lang="en" className="h-full">
<head>
<Meta />
<Links />
</head>
<body className="h-full">
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
And my routes/goods.tsx for displaying a list of items (much of this is adapted from the default Indie Stack):
export async function action({ request }: ActionArgs) {
const formData = await request.formData();
const title = formData.get("title");
const id = formData.get("id");
if (typeof title !== "string" || title.length === 0) {
return json(
{ errors: { title: "Title is required" } },
{ status: 400 }
);
}
const good = await updateGood({ title, id });
return null;
}
export default function GoodsPage() {
const data = useLoaderData<typeof loader>();
const user = useUser();
return (
<div className="flex h-full min-h-screen flex-col">
<Outlet />
<main className="flex h-full bg-white">
<div className="h-full w-80 border-r bg-gray-50">
{data.completedGoodListItems.length === 0 ? (
<p className="p-4">No goods yet</p>
) : (
<>
<h2>Incomplete</h2>
<ol>
{data.completedGoodListItems.map((good) => (
<GoodItem key={good.id} good={good}></GoodItem>
))}
</ol>
</>
)}
<>
<h2>Completed</h2>
<ol>
{data.incompleteGoodListItems.map((good) => (
<GoodItem key={good.id} good={good}></GoodItem>
))}
</ol>
</>
</div>
<Form action="/logout" method="post">
<button
type="submit"
className="rounded bg-slate-600 py-2 px-4 text-blue-100 hover:bg-blue-500 active:bg-blue-600"
>
Logout
</button>
</Form>
</main>
</div>
);
}
function GoodItem ({ good }) {
const fetcher = useFetcher();
return (
<li>
<fetcher.Form method="post">
<input type="text" defaultValue={good.title}></input>
</fetcher.Form>
</li>
)}
This results in Error: useFetcher must be used within a data router.
So then I try to follow the instructions for encapsulating the App within a data router using createBrowserRouter which leads me to writing this code in my root.tsx:
async function loader({ request }: LoaderArgs) {
return json({
user: await getUser(request),
});
}
const router = createBrowserRouter([
{
path: "/",
element: <App />,
// loader: rootLoader,
children: [
{
path: "/goods",
element: <GoodsPage />,
// loader: loaderName,
},
],
},
]);
// #ts-ignore
ReactDOM.createRoot(document.getElementById("root")).render(
<RouterProvider router={router} />
);
export default function App() {
return (
<html lang="en" className="h-full">
<head>
<Meta />
<Links />
</head>
<body className="h-full">
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
I didn't know what to add for the loaders for each element. I tried assigning the async loader to a const and adding it into the constructor for router, but I received the error: The expected type comes from property 'loader' which is declared here on type 'RouteObject' so I just left it blank.
This code results in ReferenceError: document is not defined certainly because I don't have the syntax or structure correct for this router. Can someone provide some guidance on how I should be using createBrowserRouter in this context? I know I need to use the RouterProvider component in some way, but I don't have enough experience to see the path forward. What am I missing here?
You are most probably importing useFetcher from an incorrect package. Make sure that you are importing it from #remix-run/react:
import { useFetcher } from "#remix-run/react";

How to shorten url from Next JS

In my Next js app I'm Passing an Object through pages. what I did is compress my array of objects into JSON JSON.stringify(result) from index page and in my second page I parsed it JSON.parse(props.router.query.result). this worked great. but the issue is when reloading the page the browser prompts
This page isn’t workingIf the problem continues, contact the site owner.
HTTP ERROR 431
I know this message indicates for long url head. so is there a way for me to shorten this?
index page
<Link href=
{{pathname: "/tv-shows",
query: {
result: JSON.stringify(result),
//result: [result],
img: img,
index: index,
}}} key={index}
>
<div className=' relative snap-center h-56 w-96 rounded-3xl hover:rounded-3xl hover:scale-110 hover:transition-all hover:duration-200 hover:ease-in ease-out duration-200 '>
<Image
src={img}
layout="fill"
objectFit="cover"
className={`h-full w-full bg-cover bg-no-repeat rounded-3xl hover:rounded-3xl hover:scale-110 hover:transition-all hover:duration-200 hover:ease-in ease-out duration-200`} />
</div></Link>
in second page
const TvShows = (props) => {
const [result, setResult] = useState([]);
const [index, setIndex] = useState("");
const [img, setImg] = useState("");
useEffect(()=>{
console.log("first")
console.log(props.router.query);
if (props.router.query.result){
const query = props.router.query;
const res = JSON.parse(query.result);
setResult(res);
setIndex(query.index);
setImg(query.img);
//console.log(JSON.parse(props.router.query.result));
}
},[props.router.query ])
return (
<div className=''>
<Head>
<title>{Popular[Number(index)].title} | </title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Background result={result} img={img} index={index} />
{/* <Background img={img} index={index} /> */}
<div className='cursor-default px-10'>
<div className=' text-xl pt-5 pb-5'>Full Episodes </div>
{/* <Contents result={result} index={index}/> */}
</div>
</div>
)
}
export default withRouter(TvShows)
please help me with the fix
Based on comments to your original post, I deducted that you do not want to shorten a very long URL, but you are trying to pass data between subpages of Next app and save it so it is accessible after page refresh. What you can do to solve your issue is saving your result to localStorage every time it changes:
useEffect(() => {
localStorage.setItem("result", JSON.stringify(result))
}, [result])
And then, in your second page read the data:
useEffect(()=>{
const result = JSON.parse(localStorage.getItem("result"))
console.log("first")
console.log(result);
if (result){
setResult(result);
setIndex(query.index);
setImg(query.img);
}
}, [])
After comments to this Answer:
I think that what you want to do is creating a page tv-shows, which will display the details of one Youtube playlist. Best way to get this working is by creating dynamic routes.
Create the following directory structure in your app:
root
└── pages
└── tv-shows
└── [index].js
Paste this into the file [index].js
import { useRouter } from "next/router";
export async function getStaticPaths() {
return {
paths: [{ params: { index: "0" } }, { params: { index: "1" } }],
fallback: false
};
}
export async function getStaticProps(context) {
const MY_PLAYLIST_1 = "PL9562CjMJkXIgaV_UA5hf1VADfn4Sqd0P";
const MY_PLAYLIST_2 = "PL9562CjMJkXIgaV_UA5hf1VADfn4Sqd0P";
const API_KEY = "AIzaSyCELe0KoZYBjonJskBMbzdlTuCow3sr3zo";
const PLAYLIST_REQUEST_URL_1 = `https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=500&playlistId=${MY_PLAYLIST_1}&key=${API_KEY}`;
const PLAYLIST_REQUEST_URL_2 = `https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=500&playlistId=${MY_PLAYLIST_2}&key=${API_KEY}`;
const playlistResponse1 = await fetch(PLAYLIST_REQUEST_URL_1);
const playlistResponse2 = await fetch(PLAYLIST_REQUEST_URL_2);
const playlistResult1 = await playlistResponse1.json();
const playlistResult2 = await playlistResponse2.json();
return {
props: {
results: [playlistResult1, playlistResult2],
},
revalidate: 3600,
};
}
export default function TvShows({results}) {
const router = useRouter();
const { index } = router.query;
return <div>{index}, {JSON.stringify(results[index])}</div>;
}
Next step, override content of card.js with the following (just remove result variable and the query parameter)
import Link from "next/link";
const Card = ({ index }) => {
return (
<nav>
<Link
href={`/tv-shows/${index}`}
>
<div>
<h1>card click</h1>
</div>
</Link>
</nav>
);
};
export default Card;
Override index.js to remove unnecessary API calling code and take new card.js's props into account:
import Link from "next/link";
import Card from "../comps/card";
import Popular from "../comps/popular";
export default function IndexPage() {
return (
<div>
Hello World. {/* <Link href="/about">
<a>About</a>
</Link> */}
<Card index={0} img={Popular[0].img} />
<Card index={1} img={Popular[1].img} />
</div>
);
}
How the solution works is as follows:
We create dynamic routes which takes only query parameter index of our playlist. Every index parameter that is possible to be set is defined in paths: [{ params: { index: "0" } }, { params: { index: "1" } }]. These path params are then passed to our dynamic route which is then pre-rendered, and downloading all the data only once. And finally, our route displays data based on query parameters supplied by useRouter.

NextJS build and deployment error with Vercel

I keep having errors trying to deploy my Nextjs app to vercel:
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: (0 , react_development_.useState) is not a function or its return value is not iterable
at Categories (/vercel/path0/.next/server/chunks/930.js:122:72)
at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
at bb (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
at Object.renderPage (/vercel/path0/node_modules/next/dist/server/render.js:686:46)
at Object.defaultGetInitialProps (/vercel/path0/node_modules/next/dist/server/render.js:316:51)
at Function.getInitialProps (/vercel/path0/.next/server/pages/_document.js:514:20)
at Object.loadGetInitialProps (/vercel/path0/node_modules/next/dist/shared/lib/utils.js:69:29)
I tried npm run build locally and I get this error:
> Build error occurred
Error: Export encountered errors on following paths:
/
/post/[slug]: /post/first-post
/post/[slug]: /post/how-html-css-js-work
/post/[slug]: /post/nextjs
/post/[slug]: /post/react-hooks
So I assume it has to be something inside my index page and /post/[slug] page. I tried everything like setting getStaticPaths fallback to false and using optional chaining everywhere but I still get the error.
Can someome please help me out, it is so depressing when I finished the project and I can run it in my localhost but and failed in the deployment/build time.
My / page:
import Head from "next/head";
import { PostCard, Categories, PostWidget } from "../components";
import { getPosts } from "../services";
export default function Home({ posts }) {
const sortedPosts = posts.sort(
(a, b) => new Date(b.node.createdAt) - new Date(a.node.createdAt)
);
return (
<>
<Head>
<title>JBLOG | Home</title>
</Head>
<section className="bg-zinc-200 dark:bg-gray-500 transition-colors px-5">
<div className="max-w-7xl mx-auto py-10">
<div className="grid grid-cols-1 md:grid-cols-12 gap-12">
<div className="md:col-span-8 col-span-1 ">
{sortedPosts?.map((post) => (
<PostCard key={post.node.title} post={post.node} />
))}
</div>
<div className="md:col-span-4 col-span-1">
<div className="md:sticky relative md:top-[110px]">
<PostWidget />
<Categories />
</div>
</div>
</div>
</div>
</section>
</>
);
}
export async function getStaticProps() {
const posts = (await getPosts()) || [];
return {
props: {
posts,
},
};
}
My /post/slug page:
import React from "react";
import Head from "next/head";
import { getPosts, getPostDetails } from "../../services";
import {
PostDetail,
Categories,
PostWidget,
Author,
Comments,
CommentsForm,
} from "../../components";
import { useRouter } from "next/router";
const Post = ({ post }) => {
const router = useRouter();
if (router.isFallback) {
return <div>Loading...</div>;
}
return (
<>
<Head>
<title>{post?.title}</title>
</Head>
<section className="bg-zinc-200 dark:bg-gray-500 transition-colors px-5">
<div className="max-w-7xl mx-auto py-10">
<div className="grid grid-cols-1 md:grid-cols-12 md:gap-6">
<div className="md:col-span-8 col-span-1 ">
<PostDetail post={post} />
<CommentsForm slug={post?.slug} />
<Comments slug={post?.slug} />
</div>
<div className="md:col-span-4 col-span-1">
<div className="md:sticky relative md:top-[110px]">
<Author author={post?.author} />
<PostWidget
slug={post?.slug}
categories={post?.categories?.map(
(category) => category.slug
)}
/>
<Categories />
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default Post;
export const getStaticProps = async (context) => {
const data = await getPostDetails(context.params.slug);
return {
props: {
post: data,
},
};
};
export const getStaticPaths = async () => {
const posts = await getPosts();
return {
paths: posts.map((post) => ({ params: { slug: post.node.slug } })),
fallback: true,
};
};
what's your npm run build?
https://nextjs.org/docs/basic-features/data-fetching
fallback: true is not supported when using next export.

add block-input from sanity.io to next.js blog post

I'm developing a blog on next.js with sanity.io, and I'm having trouble using the code-input plugin.
What I do have
I'm able to use the code component block on sanity, which looks something like this:
Everything good on the sanity side. My problem comes with using it on the next.js [slug].js file.
I have this error prompt out:
This issue with this is that I don't have a serializer.js file/component anywhere on my code, not even on the studio root folder. I've seen this applies for gatsby but I don't know how to apply it for Next.js
This is what I currently Have:
import groq from 'groq'
import imageUrlBuilder from '#sanity/image-url'
import BlockContent from '#sanity/block-content-to-react'
import client from '../../client'
import Layout from '../../components/layout'
import utilStyles from '../../styles/utils.module.css'
import styles from '../../components/layout.module.css'
function urlFor (source) {
return imageUrlBuilder(client).image(source)
}
const Post = (props) => {
const {
title = 'Missing title',
name = 'Missing name',
categories,
authorImage,
mainImage,
code,
body = []
} = props
console.log(props)
return (
<Layout>
<article>
<div className={styles.container}>
<figure>
<img src={urlFor(mainImage).url()} />
</figure>
<h1 className={utilStyles.headingXl}>{title}</h1>
{categories && (
<ul className="inline">
Category:
{categories.map(category =>
<li key={category}>
<span className="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-indigo-100 bg-indigo-700 rounded">{category}</span>
</li>)}
</ul>
)}
<BlockContent
blocks={body}
imageOptions={{fit: 'max'}}
{...client.config()}
{...code}
/>
</div>
</article>
</Layout>
)
}
const query = groq ` *[_type == "post" && slug.current == $slug][0]{
title,
"name": author->name,
"categories": categories[]->title,
mainImage,
code,
"authorImage": author->image,
body,
}`
Post.getInitialProps = async function(context) {
const {slug = ""} = context.query
return await client.fetch(query, { slug })
}
export default Post
I really would appreciate some help here! Thanks <3
You can pass a serializer for the code block type to your BlockContent using the serializers prop.
const serializers = {
types: {
code: props => (
<pre data-language={props.node.language}>
<code>{props.node.code}</code>
</pre>
)
}
}
// ...
<BlockContent
blocks={body}
imageOptions={{fit: 'max'}}
{...client.config()}
{...code}
serializers={serializers}
/>

Next.js Link doesn't enforce component render, serverSideProps doesn't get updated

so i have this issue with next.js, When my user tries to go from one profile to another via Link in navbar:
<li>
<Link href={`/profile/${user.user.id}`}>
<a className="flex flex-row items-center">
<BiUserCircle />
<span className="ml-1">Profile</span>
</a>
</Link>
</li>
Next doesn't seem to re-render the profile component which is unfortunate because I'm pulling initial profile data in getServerSideProps which leads to weird behavior like when the initial useState data is saved from last visited profile. How can I ensure that each time user visits the profile page brand new initial data is sent to useState?
My profile page looks like this:
const Profile = ({ initialProfile, posts }) => {
const router = useRouter();
const [profile, setProfile] = useState(initialProfile);
const { userId } = router.query;
const dispatch = useDispatch();
useEffect(() => {
// This is my current solution, however it feels really hacky
fetchProfile();
}, [userId]);
const fetchProfile = async () => {
const resp = await axios.get(apiURL + `accounts/users/${userId}`);
setProfile((prof) => ({ ...prof, ...resp.data }));
};
return (
<Layout>
<ProfileSummary
isUser={isUser}
isFollowed={isFollowed}
handleFollow={handleFollow}
profile={profile}
/>
{isUser ? (
<div className="flex justify-center">
<Button colorScheme="green">Add post</Button>
</div>
) : null}
<div className="w-full flex justify-center flex-col items-center pl-2 pr-2">
{posts
? posts.map((post) => (
<Card
key={post.id}
author={post.author}
likes={post.likes}
desc={post.description}
img={post.image}
isLiked={post.is_liked}
postId={post.id}
comments={post.comments}
/>
))
: "No Posts found"}
</div>
</Layout>
);
};
export async function getServerSideProps(context) {
const { userId } = context.query;
const profileResp = await axios.get(apiURL + `accounts/users/${userId}`);
const postsResp = await axios.get(
apiURL + `posts/?author__id=${profile.id}`
);
const profile = profileResp.data;
const posts = postsResp.data;
return {
props: {
initialProfile: profile,
posts,
},
};
}
export default Profile;
I'd really love any help, maybe I should change my overall approach?
The whole project can be found here:
https://github.com/MaciejWiatr/Nextagram/tree/develop
Dont worry this is an known bug, you can read more about it here https://github.com/vercel/next.js/issues/10400. Hopefully it will be fixed soon.

Categories