Support App Router & Pages Router #22

alvesvin · 2023-05-17T15:21:01Z

What is the purpose of this pull request? (put an "X" next to item)

[ ] Documentation update
[x] Bug fix
[ ] New feature
[ ] Other, please explain:

What changes did you make? (Give an overview)
The webpack loader selects the correct helpers on a page by page basis rather than experimental.appDir config.

Which issue (if any) does this pull request address?
#21 #7 #23

Is there anything you'd like reviewers to focus on?
Perhaps readability and size

Multiple pages dirs
Tests for multiple pages dirs
Translation in layouts, error & loading components
Tests for translation in layouts, error & loading
Next 13 sub-path routing
Do not add helpers for custom hooks & hocs
Tests for not adding helpers for hooks & hocs

alvesvin · 2023-05-17T15:21:42Z

Just a notice, this is incomplete yet. I'm going to be working on it later today.

src/loader.ts

__tests__/index.test.js

aralroca

Thanks for your contribution. Keep waiting for the final changes

alvesvin · 2023-05-18T04:12:48Z

Some updates:

We should support translation in error, loading and layout components (for Next 13)
Next 12 router implements sub-path i18n automatically while translating that to the lang search params at the page level. That's not true for the new Next 13 router. In this regard I think we should follow the pattern provided in the documentation where the user must define a dynamic route to handle sub-path i18n and, after that, we start using the lang param from the dynamic route rather than the search param for the App Router.
For Next 13 I think we could leverage better the root layout for loading the namespaces rather than injecting logic on each page. Sure it is done server side, but I think this may be a more elegant solution.

Sub-path routing

Providing more context, in Next 12, when defining i18n options in next.config.js it is possible to navigate to the following routes:

/about loads the default language
/en/about loads the en version of the page
/br/about loads the br version of the page

For Next 13, users would need to create /app/[lang]/about/page.tsx (same for any other internationalized page). Together with that, users need to create a middleware.ts to redirect to the correct language sub-path. Then we would use page's props.params.lang rather than props.searchParams.lang for App Router pages.

Domain routing

I think domain routing should be possible to define inside middleware.ts.

aralroca · 2023-05-18T12:59:41Z

__tests__/loader.test.js

@@ -0,0 +1,10 @@
+import webpack from 'webpack'
+
+describe('nextTranslate', () => {


aralroca · 2023-05-18T13:02:37Z

Some updates:

We should support translation in error, loading and layout components (for Next 13)

Next 12 router implements sub-path i18n automatically while translating that to the lang search params at the page level. That's not true for the new Next 13 router. In this regard I think we should follow the pattern provided in the documentation where the user must define a dynamic route to handle sub-path i18n and, after that, we start using the lang param from the dynamic route rather than the search param for the App Router.

For Next 13 I think we could leverage best the root layout for loading the namespaces rather than injecting logic on each page. Sure it is done server side, but I think this may be a more elegant solution.

Sub-path routing

Providing more context, in Next 12, when defining i18n options in next.config.js it is possible to navigate to the following routes:

/about loads the default language /en/about loads the en version of the page /br/about loads the br version of the page

For Next 13, users would need to create /app/[lang]/about/page.tsx (same for any other internationalized page). Together with that, users need to create a middleware.ts to redirect to the correct language sub-path. Then we would use page's props.params.lang rather than props.searchParams.lang for App Router pages.

Domain routing

I think domain routing should be possible to define inside middleware.ts.

Yes, the first approach was only for pages. But totally agree, it was pending to implement the rest and improve.

Related with #7

alvesvin · 2023-05-18T15:10:58Z

Added a todo list at the top to keep track of the progress 🎉

… parsig

alvesvin · 2023-05-19T05:23:24Z

The idea with determineResourceType function is to use it to return a string like APP_ROUTER_SERVER_PAGE, APP_ROUTER_SERVER_LAYOUT, etc, to represent the resource type and based on that we do a switch to add necessary helpers accordingly. Is that ok? I'm afraid to go too far and unnecessarily rewrite too much.

I'm doing this as first step to support translation in layout, error & loading pages.

alvesvin · 2023-05-20T03:46:56Z

I'm kinda stuck with a weird behavior in layout/loading/error components.

Inside a server layout component the useTranslation hook seems to sometimes get a stale value from the last render and other times it seems to get stuck with one value.

Funny part is that server pages work correctly even though they are being treated exactly the same by the loader (perhaps that's the problem).

I'm going to be full focused on this PR all day tomorrow. Looking forward to finish it.

aralroca · 2023-05-22T10:55:29Z

@alvesvin Thank you for all your efforts. I have seen that there is currently a bug for hooks/helpers that have the "use client", reported here: #23

since you are with this complex task could you try to fix this case? otherwise I will try to fix it once your PR is merged. Thanks! 🙏

alvesvin · 2023-05-22T11:54:30Z

@alvesvin Thank you for all your efforts. I have seen that there is currently a bug for hooks/helpers that have the "use client", reported here: #23

since you are with this complex task could you try to fix this case? otherwise I will try to fix it once your PR is merged. Thanks! pray

Oh, okay. I will fix it.

alvesvin · 2023-05-24T11:33:50Z

Guys, sorry for the delay. I have only a limited time to work on this PR. This feature is trickier than it looked like, but I'm working on it as much as I can.

I've tried a few things but still haven't come up to a reliable implementation for i18n in layouts, loading & error.

aralroca · 2023-05-24T14:07:29Z

@alvesvin Don't be afraid to make several PR, I think it would be easier to review. Feels free to remove the part of layout, loading, error and add it in another PR.

alvesvin · 2023-05-27T00:04:47Z

Hey, @aralroca I'm sorry to say that I think I'm not going to be able to accomplish this PR 😞. Since I use this library in production, I was hoping to try and fix it as it's currently not compatible with Next 13 features. Problem is I think I'm not doing a good job. The last commits is an implementation that feels kinda hacky, bloated and bug-prone. I've tried a few things but I don't have the rationale why the code is the way it is today and what should be done to productively improve it or what should be rethought.

I think I started it wrong, maybe not asking the right questions. If you could shed some light on what you think the solution would be, I'm still willing to implement it.

Sorry to make you all wait for nothing 🌵

aralroca · 2023-05-31T12:50:35Z

@alvesvin Don't worry, your contribution has already been important. As soon as I have some time I will try to implement it and I will take into account all your work on this PR. Thank you very much for your contribution 😊

AndresDevelop · 2023-05-31T22:13:40Z

Brilliant work on this one folks. I was wondering if you have a sort of deadline for the next release. This issues is time sensitive for my project . thank you 🎖️

aralroca · 2023-06-05T21:54:26Z

@AndresDevelop @alvesvin Try next-translate-plugin 2.3.0-canary.1 prerelease please 🙏

izoukhai · 2023-06-06T13:28:54Z

Hey @aralroca

Using the canary version gives me this error:

error ./node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js

aralroca · 2023-06-06T13:33:43Z

Hey @aralroca

Using the canary version gives me this error:

error ./node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js

mmmmh! Which version of Next.js are you using @izoukhai?

izoukhai · 2023-06-06T13:36:16Z

Hey @aralroca
Using the canary version gives me this error:

error ./node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js

mmmmh! Which version of Next.js are you using @izoukhai?

Next 13.4.4, along with next-translate 2.0.6.

Forgot to mention that I had no pages/ directory, creating one fixed that issue but raised a new one:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge' is not defined by "exports" in /Users/izoukhai/test/node_modules/react-dom/package.json

izoukhai · 2023-06-06T13:39:11Z

Well, after completely restarting the project, it seems to work. However, certain translations get loaded and replaced by their keys quickly after, giving a bunch of error tied to server/client mismatch. I will investigate the issue, might be related to my implementation as it impacts only my navbar

izoukhai · 2023-06-06T13:42:15Z

@aralroca the issue seems to impact client components only.

aralroca · 2023-06-06T18:19:06Z

New prerelease https://github.com/aralroca/next-translate-plugin/releases/tag/2.3.0-canary.2

izoukhai · 2023-06-06T22:02:08Z

New prerelease https://github.com/aralroca/next-translate-plugin/releases/tag/2.3.0-canary.2

The issue with pages folder is gone, but client components still don't load translations

aralroca · 2023-06-07T08:21:54Z

Thanks for your feedback @izoukhai. I'm going to investigate the client components what change in the last versions of Next.js.

aralroca · 2023-06-07T09:07:19Z

@izoukhai is possible to create a repo that reproduces this issue to help me to fix it? Thanks!

izoukhai · 2023-06-07T14:45:48Z

@izoukhai is possible to create a repo that reproduces this issue to help me to fix it? Thanks!

Yup I will give you the repo in a minute!

izoukhai · 2023-06-07T14:56:05Z

@aralroca here you go: https://github.com/izoukhai/next-translate-example-repo

aralroca · 2023-06-07T14:57:32Z

Thanks @izoukhai

aralroca · 2023-06-08T18:33:39Z

@izoukhai thanks for sharing, should be fixed in 2.3.0-canary.3 (next-translate + next-translate-plugin in 2.3.0-canary.3 version)

aralroca · 2023-06-18T17:35:59Z

Done in 2.3

aralroca · 2023-06-19T19:37:07Z

@alvesvin @izoukhai Layouts are supported in 2.4.0-canary.2 (next-translate + next-translate-plugin in the same version). Would be great if you can try and give me some feedback before the next release. Thanks 🙏

alvesvin added 2 commits May 16, 2023 23:47

(Incomplete) Add support for multiple pages directories

1ab0604

Set todo old app dir test case

c790241

alvesvin changed the title ~~Support App Route & Pages Router~~ Support App Router & Pages Router May 17, 2023

aralroca reviewed May 17, 2023

View reviewed changes

src/loader.ts Outdated Show resolved Hide resolved

aralroca reviewed May 17, 2023

View reviewed changes

__tests__/index.test.js Outdated Show resolved Hide resolved

aralroca requested changes May 17, 2023

View reviewed changes

support for multiple pages dirs

c5c7c49

alvesvin force-pushed the 21-feature-multiple-pages-dir branch from 750ab55 to c5c7c49 Compare May 18, 2023 02:23

alvesvin added 3 commits May 17, 2023 23:30

updated templateAppDir snapshot

ba96ccd

fixed pagesInDir tests

98c839c

wip: loader tests

1d48a58

alvesvin requested a review from aralroca May 18, 2023 04:13

aralroca reviewed May 18, 2023

View reviewed changes

__tests__/loader.test.js

@@ -0,0 +1,10 @@

import webpack from 'webpack'

describe('nextTranslate', () => {

Copy link

Owner

aralroca May 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

alvesvin added 3 commits May 18, 2023 23:38

prefering props.params.lang over search params when using app router

44048e0

updated snapshots

0aa1998

added determineResourceType to get the type of the file the loader is…

5d17fab

… parsig

alvesvin force-pushed the 21-feature-multiple-pages-dir branch from 24abf2f to 5d17fab Compare May 19, 2023 05:01

removed console.log and extra line

57d1b78

removed unused import

ff5e898

aralroca mentioned this pull request May 19, 2023

In next version 13.4.0 app directory, next-translate doesn't work aralroca/next-translate#1041

Closed

adding helpers for layout, error & loading

9320544

alvesvin added 2 commits May 22, 2023 00:48

fixed getResourceType types

babe896

tweaked templates for layout, loading & error pages

4cff474

alvesvin added 2 commits May 25, 2023 19:44

basic loader tests

e9fa3af

add translation to layout

042b19d

aralroca mentioned this pull request Jun 5, 2023

use appDir with pagesDir together + remove expermiental.appDir #25

Merged

aralroca mentioned this pull request Jun 8, 2023

fix client components #27

Merged

amosbastian mentioned this pull request Jun 8, 2023

Client component: Error: Cannot read properties of undefined (reading '_context') #28

Closed

aralroca closed this Jun 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support App Router & Pages Router #22

Support App Router & Pages Router #22

alvesvin commented May 17, 2023 •

edited

Loading

alvesvin commented May 17, 2023 •

edited

Loading

aralroca left a comment

alvesvin commented May 18, 2023 •

edited

Loading

aralroca May 18, 2023

aralroca commented May 18, 2023 •

edited

Loading

Sub-path routing

Domain routing

alvesvin commented May 18, 2023

alvesvin commented May 19, 2023 •

edited

Loading

alvesvin commented May 20, 2023

aralroca commented May 22, 2023

alvesvin commented May 22, 2023

alvesvin commented May 24, 2023 •

edited

Loading

aralroca commented May 24, 2023

alvesvin commented May 27, 2023

aralroca commented May 31, 2023

AndresDevelop commented May 31, 2023

aralroca commented Jun 5, 2023

izoukhai commented Jun 6, 2023

aralroca commented Jun 6, 2023 •

edited

Loading

izoukhai commented Jun 6, 2023

izoukhai commented Jun 6, 2023

izoukhai commented Jun 6, 2023

aralroca commented Jun 6, 2023

izoukhai commented Jun 6, 2023

aralroca commented Jun 7, 2023

aralroca commented Jun 7, 2023

izoukhai commented Jun 7, 2023

izoukhai commented Jun 7, 2023

aralroca commented Jun 7, 2023

aralroca commented Jun 8, 2023

aralroca commented Jun 18, 2023

aralroca commented Jun 19, 2023 •

edited

Loading

		@@ -0,0 +1,10 @@
		import webpack from 'webpack'

		describe('nextTranslate', () => {

Support App Router & Pages Router #22

Support App Router & Pages Router #22

Conversation

alvesvin commented May 17, 2023 • edited Loading

alvesvin commented May 17, 2023 • edited Loading

aralroca left a comment

Choose a reason for hiding this comment

alvesvin commented May 18, 2023 • edited Loading

Sub-path routing

Domain routing

aralroca May 18, 2023

Choose a reason for hiding this comment

aralroca commented May 18, 2023 • edited Loading

Sub-path routing

Domain routing

alvesvin commented May 18, 2023

alvesvin commented May 19, 2023 • edited Loading

alvesvin commented May 20, 2023

aralroca commented May 22, 2023

alvesvin commented May 22, 2023

alvesvin commented May 24, 2023 • edited Loading

aralroca commented May 24, 2023

alvesvin commented May 27, 2023

aralroca commented May 31, 2023

AndresDevelop commented May 31, 2023

aralroca commented Jun 5, 2023

izoukhai commented Jun 6, 2023

aralroca commented Jun 6, 2023 • edited Loading

izoukhai commented Jun 6, 2023

izoukhai commented Jun 6, 2023

izoukhai commented Jun 6, 2023

aralroca commented Jun 6, 2023

izoukhai commented Jun 6, 2023

aralroca commented Jun 7, 2023

aralroca commented Jun 7, 2023

izoukhai commented Jun 7, 2023

izoukhai commented Jun 7, 2023

aralroca commented Jun 7, 2023

aralroca commented Jun 8, 2023

aralroca commented Jun 18, 2023

aralroca commented Jun 19, 2023 • edited Loading

alvesvin commented May 17, 2023 •

edited

Loading

alvesvin commented May 17, 2023 •

edited

Loading

alvesvin commented May 18, 2023 •

edited

Loading

aralroca commented May 18, 2023 •

edited

Loading

alvesvin commented May 19, 2023 •

edited

Loading

alvesvin commented May 24, 2023 •

edited

Loading

aralroca commented Jun 6, 2023 •

edited

Loading

aralroca commented Jun 19, 2023 •

edited

Loading