svobik7 / next-roots Goto Github PK

View Code? Open in Web Editor NEW

169.0 169.0 12.0 3.21 MB

Next.js utility to generate i18n routes in the new APP directory.

Home Page: https://next-roots-svobik7.vercel.app/

License: MIT License

JavaScript 8.02% TypeScript 91.82% Shell 0.16%

next-roots's Introduction

Jirka Svoboda

🍀 enthusiastic full-stack web developer
❤️ with passion for TypeScript
🚀 fan of Next.js, React.js, Tailwind, Prisma and tRPC
🇨🇿 based in Prague, Czech Republic
🎂 born in 1989

Feel free to reach me on

💻 Technical Experience

Lead Engineer @ EPAM
(Jan 2022 - Present)

Segments: Finance, Trading
Technologies used: React.js, Redux Toolkit, RTK Query, AG-Grid, Bootstrap, Zod, Cypress, Node.js, Express.js, GitLab, Jenkins
Turning MVP into fully-featured project built on React.js
Making the main architecture decisions
Establishing e2e testing and code quality metrics
Integrating the project into client's platform
Co-working with DevOps on enhancing CI/CD process
Being the point of contact in cross-team communication
Mentoring others about React.js

Senior Engineer @ EPAM
(Jun 2021 - Jan 2022)

Segments: Finance, Trading
Technologies used: Stencil.js, Rambda.js, Web-components, AG-Grid, Express.js, JIRA, GitLab, Swagger, Jenkins
Maintaining of existing modules and components
Adapting AG-Grid to client's needs

Full-stack Engineer @ YeahCoach
(Mar 2015 - Jun 2021)

Segments: Social network, Community hub, Education, Self-development, Mindfullness, Philanthropy
Technologies used: Next.js, React.js, TypeScript, PHP, SQL, Yii2, Material UI, Vercel, IMGIX, NGINX, Google Cloud, Bitbucket
Creating multilingual and SEO optimized frontend
Creating DB & API backend architecture
Managing dev team and approving their PRs
Looking after processes and infrastructure

Full-stack Engineer @ D solutions
(Jun 2011 - Jan 2015)

Segmnents: E-commerce, Web presentations
Technologies used: PHP, SQL, HTML, CSS, JS, jQuery
Building custom PHP projects using Yii2 framework
Creating websites using OpenCart or WordPress
Gathering feedback from customers

Student @ Czech Technical Univesity
(Jun 2009 - Jan 2012)

Segments: Web & multimedia
Technologies used: JAVA, C, PHP, SQL, UML, JavaScript, jQuery
Building school projects in various languages

👨‍🏫 Mentoring Experience

ReactJS Global Mentoring Program @ EPAM Academy (company internal) (2022, 2023)
Mentoring/On-boarding team mates about ReactJS, CleanCode @ EPAM
Mentoring team mates about PHP (Yii2) @ YeahCoach

🏗️ Own Work

next-bodies - Next.js utility to orchestrate contextual modal routing using multiple page body components.
next-roots - Next.js utility to generate i18n pages according to custom rewrites rules.

📒 Writing

📌 On The Side

Resumable examiner @ Qwik (since 2022)
Resumable JavaScript framework
Former contributor @ Blitz.js (Jul 2020 - 2021)
The Fullstack React Framework

💬 Languages

Czech: Native
English: B2+

👩🏼‍🎓 Courses

React Native @ EPAM Academy (internal)
React Testing with Jest and Enzyme @ Udemy Academy
The Complete Guide to Advanced React Component Patterns @ Udemy Academy
Understanding TypeScript @ Udemy Academy
Practical Guide To React Native @ Udemy Academy

👉 Want To Learn

React Native ✅
Prisma + tRPC
PartyTown by Builder.io
Spanish

🙂 Hobbies

Fitness, badminton, sport climbing
Cooking, piano, meditation
...and more

🧰 Toolbox

VS Code, macOS
Slack, Trello, JIRA
GitHub, BitBucket, Vercel, DigitalOcean

Website version: https://svobik7.github.io/svobik7/

next-roots's People

Contributors

Stargazers

Watchers

Forkers

xxd4rkc0d3rxx feworks jon1vk jmoros pzpsofficial iamrekas adl5423 mocanew salahzsh eyedea-io

next-roots's Issues

Display 404 page in correct language

How can I show a 404 page in selected language?

env

"next": "14.0.4",
"next-roots": "^3.4.1"

Problem

When I built locally, it fails with this error:

Type error: Type 'OmitWithTag<{ locale: RouteLocale; params: any; } & { children?: ReactNode; },
 keyof LayoutProps, "default">'

 does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'locale' is incompatible with index signature.
    Type 'string' is not assignable to type 'never'.
      Type 'string' is not assignable to type 'never'.

It also fails when this is build on Vercel, this appears in logs:

<html>
<body>
<!--StartFragment-->
19:59:49.314 | yarn next-roots
19:59:49.618 | yarn run v1.22.17
19:59:49.646 | $ /vercel/path0/node_modules/.bin/next-roots
19:59:49.756 | next-roots - generation done in: 35.505ms
19:59:49.760 | Done in 0.15s.
19:59:50.631 | ▲ Next.js 14.0.4
19:59:50.632 |  
19:59:50.633 | Creating an optimized production build ...
19:59:57.336 | ✓ Compiled successfully
19:59:57.337 | Linting and checking validity of types ...
20:00:01.900 | Failed to compile.
20:00:01.900 |  
20:00:01.901 | app/_roots/layout.tsx
20:00:01.901 | Type error: Layout "app/_roots/layout.tsx" has an invalid "default" export:
20:00:01.901 | Type "{ locale: RouteLocale; params: any; } & { children?: ReactNode; }" is not valid.
20:00:01.901 |  
20:00:01.968 | Error: Command "npm run build" exited with 1

<!--EndFragment-->
</body>
</html>

The type that I´m using for the RootLayout is:

export type RootLayoutProps = PropsWithChildren<{
  locale: RouteLocale;
  params: any;
}>;

I followed How to keep original routes within APP folder to support RSC? path.

if you need more context this is the repo.

btw I was wondering when I run the command yarn next-roots should I commit the generated folders?

Great job I´m loving this library!

Rewrites Meta data

Custom meta data should be attach to rewrites rule ir rewrite scope or in page scope.

Expected behavior

{
  root: 'welcome',
  pages: [
    { locale: 'en', metaData: { title: 'EN-welcome-title' }, ... }
  ],
  metaData: { css: [ 'css/welcome.css' ] }
}

rewrites.table.js is changed to rewrites.js
named export is used for rewrites table
named export is used for rewrites meta
rewrite scope meta data are merged to each page scope during build time
page scope meta data are available during runtime inside proper page

Define prototypes out of from schemas

Moving prototypes out of schemas could make config more readable.

schemas: [...],
prototypes: [...]

Add support for Metadata API for layout files

Add support for static metadata (export const metada: Metadata) for layout files.
Add support for dynamic metadata (export async function generateMetadata(): Promise<Metadata>) for layout files.

See https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Mutations rules for current page should be directly injected into page during build time

Add option to drop Types

When user is using this library without TypeScript the pages are still generated with some typings and then js throws an error.

Example can be seen here #33 (comment)

Extract rewtites Link to separate package

Expected behavior

We have separated package that extends next/link with localized prefix

https://nextjs.org/docs/api-reference/next/link

package exists
localization works
link query is persisted when given with root or key /account/profile?param=value
UrlObject in href/as is beeing rewritten

—-

leading slash in link root (href, as) is ignored

Feature: Add support for parallel routes

Currently the package does not support parallel routes. Parallel routes are extremely helpful for designing more complex layouts.

I can help with implementing this functionality since it probably needs only some changes to the getRoute.ts file and some new test cases to confirm the new additions are working properly.

Implementing Client-Side Translation Feature

Hello @svobik7,

I hope this message finds you well. I am currently using your "next-roots" project and I find it very helpful. I am however running into a challenge that I hope you can help with. I am trying to add a method to get the translations from a client-side component.

I need the ability to use a function like t('key.value') in the client-side components to manage translations. That would help me to manage translations better, for example I want to take advantage of the functionalities of: https://www.i18next.com/translation-function/formatting.

Thanks for your support.

Vercel build error

env

"next": "13.2.5-canary.16",
"next-roots": "^3.0.5"

problem

When this is built locally, it is successful. However with this is build on Vercel, this appears in logs:

Module not found: Can't resolve './cache/schema' in '/vercel/path0/node_modules/next-roots/dist'

Later on in logs, this error for one of the app pages:

./app/(en)/(admin)/admin/comments/page.tsx:3:10
16:55:05.628 | Type error: Module '"next-roots"' has no exported member 'Router'.

Question about usage

Hi,

Is this something I can do with next-roots? It would be a life-saver if it so.
vercel/next.js#54467

I hope it's clear, but I'm happy to give you more details.

Add support for Intercepting routes

Add support for (..) intercepting routes syntax
Add parallel and intercepting routes example - article or author can be displayed even in modal
Update readme with parallel an interceptiong routes if needed

@see https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

Backslash issue

Generated pages has backslashes on their import lines as seen on the screenshot below. Thus, it gives module not found error

Note: I'm using Windows 10. It works perfectly on MacOSX

Move layout to domain

Keep roots only for initial data manipulation, configs and ssg

Create debug component

move layout data to expandable modal component - debug component

Source folder wiped completely when roots script runs into error

Hi,

First of all, thanks for the amazing package. I have gotten it to work on a sample project and I was going to implement it on a new more serious project today. I tried to setup next-roots with the dest directory as /app, so I can use RSC. Also, I use npm in this project (if it matters).

My folder structure is/was like so:

...
src
> app
>> _routes
>>> api
>>> [uid]
>>> page.tsx
>>> ...
> components
> lib
...

I moved all my previous app content into the app/_routes folder and then I ran the roots script. Upon which point I get this error:
Error: ENOENT: no such file or directory, copyfile 'C:\Projects\site\src\app\_routes\api\revalidate\route.js' -> 'C:\Projects\site\src\app\en\api\revalidate\route.js'. In hindsight, I probably should have kept /api in the app folder, not _routes folder.

Anyway, after the script failed, everything in app/_routes is gone, in other words, all of my original files and folders. If I didn't have a git history I guess there would be no way to get the files back.

I figured I'd raise an issue about it. Some people set up projects and add git later on, in their case, this sort of result from a failed script would be really unfortunate. Maybe a warning is in order in the Getting started guide, to let people know they should back up their files first or make a commit or something.

Anyway, in my case, I have frequent commits so it was no problem. Just a thought.

Thanks again for the great package! Wish vercel would implement something like this into next.

SEO concerns

I was wondering what are the possible drawbacks or advantages of this method for handling i18n regarding SEO, compared to other ways e.g. using subdomains(www.fr.somesite.org/about)

Routing from index page

I'd like to have a routing from index.js to the corresponding locale's index page at the start. E.g from "/" to "/en". I actually did with next.js's built-in Router API and getServerSideProps but I'm curios if there is an elegant way to do it with next-roots.

How to Handle Dynamic Slugs with Translated Slugs?

Problem:
I am working on a project that involves dynamic slugs (such as cities, product pages, or articles). Your docs included some dynamic slug examples but they are not translated like: author names or id's. But what should i do when i need to translate them also? most use cases for articles page slugs.

Make library super tiny

Separate build time and runtime assets strictly.

Check that tree-shaking warks well - https://dev.to/lukasbombach/how-to-write-a-tree-shakable-component-library-4ied

drop path-regexp dependency

getHref should return the most specific route

Hi!

First of all, thank you for great work, it really is a life saver ;)

I have the following structure of my pages:

[slug] // directory for pages that can be dynamically created via CMS
page.tsx // for home page
news // directory for news

When I call

const route = router.getRouteFromHref('/news');

I get:

{
    name: '/[slug]',
    href: '/locale/:slug'
}

Am I missing something? Or is it connected with one of opened issues?

typescript type declarations missing in npm package

Seems like there's no typescript declaration files included in the npm package, there's an entry index.d.ts file but none of the files in the dist folder has a corresponding declaration file.

I'm using version 3.2.0.

question regarding a possible --watch option

Since we are working in a different directory than the app dir, nextjs obviously will not know about the latest changes Have you considered adding a --watch option to the cli so esbuild can regenerate on file changes?
thank you!

Add support for Route Segment Config for Layouts and Pages

Add support for Route Segment Config for Layouts and Pages:

export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'

Good to know: The values of the config options currently need be statically analyzable. For example revalidate = 600 is valid, but revalidate = 60 * 10 is not.

See: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

Rename package to `next-roots`?

Add support to nextjs rewrites

Nextjs rewrites should be automatically generated when as differs from href.

{
  root: 'modules/users/roots/user-view-root', // path-to-root-file
  rootName: 'users/view', // unique id used to find href and as'
  pages: [
    { locale: '*', path: '[username]/index', as: '@:username(\w-.)' }
  ]
}

Change example data (authorts and articles) to db.json

Extend router with locale prefix

Expected behavior

Extends next/router with localized prefixes.

https://nextjs.org/docs/api-reference/next/router

next-i18n-rewrites/router package exists
useRouter hook is available
withRouter HOC is available
Router is available
rewrites router push attaches locale prefix
rewrites router replace attaches locale prefix
router.currentRule exists
router.currentLocale exists

Does not work correctly when Next.js config output option is set to 'standalone'

When running Next.js as a standalone server for example in EC2 or docker container, the Router functionality breaks.

Since Next.js is ran as a basic Node.js server in a standalone mode, the Router class is shared for each page generation. As so, the Router.getPageHref() can return wrong values in the generation phase of the page.

Here is an example, what goes wrong:

1. Page "/fi" gets revalidated
2. Page "/fi" regenaration is started
3. Router.setPageHref("/fi") is called
4. Page "/en" gets revalidated
5. Page "/en" regenaration is started
6. Router.setPageHref("/en") is called
7. Page "/fi" calls Router.getPageHref() --> returns wrong value "/en" for "/fi" page
8. Page "/fi" regeneration is finished with wrong data
9. Page "/en" regeneration is finished with correct data

Problem can be solved by removing Router.setPageHref() and Router.getPageHref() and by passing pageHref always to the OriginPage straight through props and modifying functions that use Router.getPageHref to take the pageHref as a parameter.

MetaData mutations should be statically injected to pages during build time

Dynamic routes with SSR and Automatic Static optimization

We need to have custom root for detail pages and have possibility to rewrite them as static ones.

Expected behavior

roots/detail/article/[id].tsx

~~should be rewritten to pages/detail/article/[id].tsx~~ should be rewritten to pages/[...slug].tsx
should be ASO (automatic static optimize)
locale should be know during SSR
rewrites.rules.js file should be generate during build
dynamic slug param is attached to page path
next.js shoud generate static content dynamically base on getStaticPaths and getStaticProps
creating link to dynamic page work
parsing browser route to page work

Question about language detection

Hi @svobik7, sorry for opening an issue for a question 😅

We are considering using next-roots as a replacement to our current i18n solution, with which we had several problems.
I am wondering if there would be a way to support language detection while using next-roots.

For instance, if a new user navigates to mywebsite.com/blog and the locale of the browsers user is fr_CA we would like to make a redirection to mywebsite.com/fr/blogue. My first guess would be to create a custom Next middleware for that, but we would have to find the corresponding url in another language, as defined in the i18n.ts files. Do you think this is something easy to achieve ?

Thank you for your help !

Make Readme guide for 1.0.0

Separate meta to custom package

Expected behavior

Meta handlers are packed in next-i18n-rewrites/meta

useMeta hook works for current path
withMeta HOC works dor current meta

Generating route names for dynamic content

Hello there,

Firstly, let me thank you for this piece of code, it is solving some very basic questions. :)

However, I have some doubts, namely, is it possible to create routing with dynamically generate routes?

I'm not sure if this is a feature request or if I'm missing something.

Allow me to explain.
I'm building a LanguageSwitcher component with the objective to have this functionality:

User is in "/" (default language), clicks in targetLanguage in the LanguageSwitcher and there's a link to redirect him to "/es".
User is in "/about" (static page in the default language), clicks in targetLanguage and link redirects him to "/es/sobre".
User is in "/categories/cat-example" (dynamic page which renders categories through generateStaticParams), clicks in targetLanguage and links him directly to "/es/categorias/categoria-ejemplo".

So, basicaly, what I'd need would be a way to get the current route and fetch the correspondent href in the target language. This works for static content but I couldn't find a way to generate route names for dynamic content.

For reference, in the 3rd example, I'm fetching the content from an outside source depending on the locale.

I couldn't find a solution for this in the example from the repo.

Thank you for your time!

Merge schema rules with schema meta data to smaller file size

Add option `hostname` to link.href

To be able to pass hostname and get full href or as.

Example:

const link = useRootLink();

// returns `/en`
link.href('home');

// returns `https://www.domain.com/en`
link.href('home', { hostname: 'https://www.domain.com' });

Direct schemaRoot specification

Currently the only way of setting root specification (metaData, pages aliases, ...) is by placing all schemas into roots.config.js. What if there is a better way by specifying everything directly inside the root?

Current Behavior

In roots.config.js

{
  schemas: [
    // ... all root schemas goes here together with prototypes
  ]
}

Future behavior

In roots/home.tsx

HomeRoot.schemaRoot = {
  name: 'home',
  pages: [ ... ],
  metaData: [ ... ]
}

Restrictions

bundle size must not be touched
prototypes must be specified somewhere
specification must be intuitive

Doesn't generate 'pages' directory

When I run yarn dev it briefly generates 'pages' directory and removes it. Then the compiler exits with the error Error: > Couldn't find a pages directory. Please create one under the project root

Default locale without `/{locale}/` in url

Expected behavior

When useDefaultLocalePrefix is set to false all route aliases and hrefs are generated with no prefix e.g. /account/profile.htm and automatic redirect rule is added to rewrites.js

How to generate pages outside of locale folders?

I'd like to display the same page with different paths without specifying the locale. Say I have about-us root, I'd like to bring this page by either /about-us or /hakkimizda.

Prototype schemas

Add option to specify prototype schema that will be merger with real schema during build type

{
      root: 'account/(.*)',
      metaData: [
        { locale: 'cs', data: { section: 'Účet' } },
        { locale: 'en', data: { section: 'Account' } },
        { locale: 'es', data: { section: 'Cuenta' } },
      ],
      isPrototype: true,
},
{
      root: 'account/profile',
      pages: [
        {
          locale: 'en',
          path: 'account/profile-:token',
        },
        {
          locale: 'cs',
          path: 'ucet/profil-:token',
        },
        {
          locale: 'es',
          path: 'cuenta/perfil-:token',
        },
      ],
      metaData: [
        { locale: '*', data: { background: 'orange' } },
        { locale: 'cs', data: { title: 'Profil' } },
        { locale: 'en', data: { title: 'Profile' } },
        { locale: 'es', data: { title: 'Perfil' } },
      ],
      params: { token: 'b1' },
}

During build time account/profile will be merged with `account/*.

roots.schema.js should be split to multiple roots.schema.[locale].js to keep initial import size tiny

Add support for localizing NotFound components

Currently not-found.tsx files cannot be localized. Locale should be forwarded to NotFound components the same way as for the Layout components.

See https://nextjs.org/docs/app/api-reference/file-conventions/not-found

Optional catch-all segments

Hi !
Thank you for this project. I wondered if I would need to make next-translate-routes compatible with the app router, but it seems that your solution is better suited for this. I am currently trying it on our migration attempt.
We would need catch-all and optional catch-all segments though, and it seems to not be supported yet (at least, the types are not generated correctly). Would it be possible ?

Move roots/index to roots/home and create static index file with redirects to `/{user-locale}`

Path aliases seem take no effect

Whenever I define alias for pages I expect to see URL changes with alias value but I couldn't make it work. In the example below I'd like to change the slug to the aliases but nothing happens

{
      root: 'about-us',
            pages: [
                {locale: 'tr', path: 'hakkimizda', alias: '/biz'},
                {locale: 'en', path: 'about-us', alias: '/us'},
            ],
 },

Creating links without subscription to router change

When using useRouter() in component it always breaks memoized component. Try to create links without using router hook.

svobik7 / next-roots Goto Github PK

next-roots's Introduction

Jirka Svoboda

💻 Technical Experience

👨‍🏫 Mentoring Experience

🏗️ Own Work

📒 Writing

📌 On The Side

💬 Languages

👩🏼‍🎓 Courses

👉 Want To Learn

🙂 Hobbies

🧰 Toolbox

next-roots's People

Contributors

Stargazers

Watchers

Forkers

next-roots's Issues

env

Problem

Expected behavior

Expected behavior

Hello @svobik7,

env

problem

Expected behavior

Expected behavior

Expected behavior

Current Behavior

Future behavior

Restrictions

Expected behavior

Recommend Projects

Recommend Topics

Recommend Org