The result of collaborations from which I have drawn the best, combining the parts that I appreciated most of my and other people's work.
-relevants credis inside-
A ready-made package for website development and progressive web apps. It includes translations, storybooks, an idea for the organization of services, and some common components based on Material-ui.
This is a Next.js project bootstrapped with create-next-app.
The package is made of:
Nextjs, Webpack 5, Storybook, material-ui, Babel, React, Typescript, gsap, styled-components, next i18n, lingui
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
First, run the development server:
npm run storybook
# or
yarn storybookTo learn more visit the official documentation: https://storybook.js.org/docs/react/get-started/introduction
Configuration is based on the following guide https://blog.logrocket.com/complete-guide-internationalization-nextjs/
TO ADD A LANGUAGE
- Add new locale slug in next.config.js -> locales [...]
- Add the same locale slug in .linguirc -> locales [...]
- At the next refresh the localhost/{locale-slug} address will be immediately available
TO ADD A TRANSLATION
- Add a
<Trans>placeholder text</Trans>element - Execute: "npm run extract" to extract the placeholders and make them available for translation
- Insert the relative translation in locales/{locale-slug}/messages.po
- Execute "npm run compile & npm run dev"
LINKS
If you want to make sure that the links follow the current translation, use the TextLink component which automatically adds the prefix of the active language.
The package contains a series of interceptors and classes useful for managing the API response data. Through some procedures shown as an example it will be possible to create your own services and the corresponding data models. Note that these services are configured to work with a well-defined response structure, also exposed in the code. Obviously, no one prevents you from manipulating the algorithms to meet your needs. To get an idea, look in the "my_tools/services" and "my_tools/models" folder.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.