no way to create internatiolization with Next.js 14

nicitaacom commented 7 months ago

Mentioned here - https://github.com/i18next/next-i18next/discussions/2223

adrai commented 7 months ago

Proof it works: https://github.com/i18next/next-i18next/discussions/2223#discussioncomment-7349759

adrai commented 7 months ago

didn't you read this? https://github.com/i18next/next-i18next/discussions/2223#discussioncomment-7349763

nicitaacom commented 7 months ago

didn't you read this? #2223 (comment)

I read this and I replied to this

As you see I got error And it error not with my project - I got it after git cline your example

nicitaacom commented 7 months ago

Also I read this

And see this

nicitaacom commented 7 months ago

Also I see this

And read this

So what do you say about docs for TypeScript user and about testing your own docs how it works? I mean docs requires improvement Library requires fix for this error I send above

adrai commented 7 months ago

You're mixing stuff here.... In your screenshots I see you're following the example for the Next.js App router approach... that's not next-i18next... next-i18next uses the pages approach of Next.js https://stackoverflow.com/questions/76570208/what-is-different-between-app-router-and-pages-router-in-next-js

For next-i18next check this example: https://github.com/i18next/next-i18next/tree/master/examples/simple it is tested on each commit... there are no errors... I just also tried to clone everything on a new machine... and all works as expected... so I assume your local setup has some issues... Just to be sure I uploaded a zip file of the simple example, so you have it also here. simple.zip

An example for the app router approach is here: https://github.com/i18next/next-app-dir-i18next-example-ts

adrai commented 7 months ago

Since this is proofed by a lot of users around the world and it works. I'll close this issue... If you see any other errors that are related to next-i18next please create a minimal reproducible example repository with reproducible steps that illustrates your error. btw: your repository is still mixing stuff, like still using next-intl: https://github.com/nicitaacom/acc2-i18n/blob/development/app/%5Blocale%5D/layout.tsx#L3 and https://github.com/nicitaacom/acc2-i18n/blob/development/app/%5Blocale%5D/page.tsx#L2

this is not next-i18next... and also not plain i18next with app router... but your Next.js approach seems to be the app router approach... but you're still using next-i18next here: https://github.com/nicitaacom/acc2-i18n/blob/development/package.json#L20

So sorry, but please first learn the basics of Next.js (like the differences between pages approach and app approach), then decide which i18n framework you want to rely on... (this repo here is next-i18next (not even i18next core)) and not next-intl... next-intl is here: https://github.com/amannn/next-intl

nicitaacom commented 7 months ago

Why in this case I see error?

I use this guide and do exact same steps as in guide and see

I dan't understand naming of this next-i18next - if it for pages setup - name it like pages-i18next or app-i18next

I created this minimal example - https://github.com/nicitaacom/acc2-i18n In this example I did git clone as you messaged

Here a TypeScript example: https://github.com/i18next/next-13-app-dir-i18next-example-ts

as I see from naming its for app directory - so why do I get error in this example (I just did git clone)

As I see next steps you give me some guide or steps I need to do to implement internatiolization in my project with next 14 and app router setup I'm preciate your answers If you help me with this step - I will create guide on YouTube (cause I watched some guides and they doesn't work for me) My guide may help other developers with intenatiolization

adrai commented 7 months ago

I try to explain it the last time:

Your example: https://github.com/nicitaacom/acc2-i18n does NOT use i18next or at all... you are using next-intl (i.e. here: https://github.com/nicitaacom/acc2-i18n/blob/development/app/%5Blocale%5D/page.tsx#L2)

I dan't understand naming of this next-i18next - if it for pages setup - name it like pages-i18next or app-i18next

Because next-i18next was created before Next.js introduced app router... so next-i18next is only for the older pages approach.

Here a TypeScript example: https://github.com/i18next/next-13-app-dir-i18next-example-ts

as I see from naming its for app directory - so why do I get error in this example (I just did git clone)

I just tried it myself on 3 different machines, and it works... I don't see any errors.

nicitaacom commented 7 months ago

as I see from naming its for app directory - so why do I get error in this example (I just did git clone)

I just tried it myself on 3 different machines, and it works... I don't see any errors.

I'm expect that I git clone this example and get no errors (I want to implement this example in my project) Here is proof that I got an error

https://github.com/i18next/next-i18next/assets/39565703/d450d743-61e0-4596-9ec2-259fd68cc424

adrai commented 7 months ago

go outside of your acc2-i18n directory
then git clone git@github.com:i18next/next-app-dir-i18next-example-ts.git
like any other node.js project npm install

tldr;

cd ..
git clone git@github.com:i18next/next-app-dir-i18next-example-ts.git
cd next-app-dir-i18next-example-ts
npm install

nicitaacom commented 7 months ago

└─# cd ..       
git clone git@github.com:i18next/next-app-dir-i18next-example-ts.git
cd next-app-dir-i18next-example-ts
npm install
Cloning into 'next-app-dir-i18next-example-ts'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
cd: no such file or directory: next-app-dir-i18next-example-ts
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /home/kali/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/home/kali/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2024-01-31T07_09_36_136Z-debug-0.log

https://github.com/i18next/next-i18next/assets/39565703/48ccac6c-ee1e-48be-b3b3-19207e893096

I wait that you answer how to fix it

adrai commented 7 months ago

Seems your local git/github setup is broken... => https://stackoverflow.com/questions/12940626/github-error-message-permission-denied-publickey

Try this:

cd ..
git clone https://github.com/i18next/next-app-dir-i18next-example-ts.git
cd next-app-dir-i18next-example-ts
npm install

And if that does also not work... then download this zip file: https://github.com/i18next/next-app-dir-i18next-example-ts/archive/refs/heads/main.zip

unzip it...

I hope this helps...

nicitaacom commented 6 months ago

:)

temp

Me

poker face

Please help

I'm waiting that you send some instructions I need to do in this case Or quick video that it work for you and then I do the same (run pnpm build)

adrai commented 6 months ago

I'll try to explain this the last time.

https://github.com/i18next/next-app-dir-i18next-example-ts and https://github.com/nicitaacom/acc2-i18n are 2 repositories each one with its own package.json and each one being an individual Next.js project. You can't have one inside the other.... So forget about your acc2-i18n folder for a moment... Just open your terminal (not Visual Code) and then do this:

cd ~/Documents/GitHub
git clone https://github.com/i18next/next-app-dir-i18next-example-ts.git
cd next-app-dir-i18next-example-ts
npm install

After that try to compare that project with your acc2-i18n project...

Seems you're lacking the basics of how git and node.js and Next.js works on your file system...

Since it is not my responsibility to teach you these things and I don't have time for it (I have already invested too much time for you), I will not answer you anymore from now on. Good luck.

nicitaacom commented 6 months ago

I will not answer you anymore from now on. Good luck.

Bro its issue in YOUR repository And I did what YOU messaged And its not my problem that after doing what you messaged I have errors

And even after

cd ~/Documents/GitHub
git clone https://github.com/i18next/next-app-dir-i18next-example-ts.git
cd next-app-dir-i18next-example-ts
npm install

I have the same issue because your respositoty is NOT TypeScript version (as you see on screenshot) I'm waiting update from you up to TypeScript version of https://github.com/i18next/next-app-dir-i18next-example-ts.git repository because in name I see ts but in fact its not TypeScript version and if you run pnpm build it trow error

adrai commented 6 months ago

Please try one last time... I just updated all dependencies to be sure everything is up-to-date:

cd ~/Documents/GitHub
git clone https://github.com/i18next/next-app-dir-i18next-example-ts.git
cd next-app-dir-i18next-example-ts
npm install

If that still shows the errors in your editor, then please run npm run lint if that works, then your visual code setup might influence it...

nicitaacom commented 6 months ago

If that still shows the errors in your editor, then please run npm run lint if that works, then your visual code setup might influence it...

I'm sure that vs code setup don't cause TypeError

Binding element 'lng' implicitly has an 'any' type.ts(7031)
(parameter) lng: any

https://github.com/i18next/next-i18next/assets/39565703/11190491-65b6-4b53-8368-eaedeecea1ad

As you see here you use TypeScript

But in head.tsx you don't use TypeScript that cause error I'm waiting update from you for this repository https://github.com/i18next/next-app-dir-i18next-example-ts that fixes TypeError

adrai commented 6 months ago

I see only typescript...

btw: since TypeScript is a superset of Javascript the code always works... (npm run dev)... Only lint has a problem....

nicitaacom commented 6 months ago

Now npm run lint work and pnpm build throw no error Thank you for fix

Waiting for eslint warning fix React Hook useEffect has a missing dependency: 'setCookie'. Either include it or remove the dependency array. react-hooks/exhaustive-deps

nicitaacom commented 6 months ago

Also I see this overflow issue