├── .eslintrc.json ├── .gitignore ├── .gitpod.yml ├── .vscode └── settings.json ├── README.md ├── app ├── [lng] │ ├── client-page │ │ └── page.jsx │ ├── components │ │ └── Footer │ │ │ ├── FooterBase.jsx │ │ │ ├── client.js │ │ │ └── index.js │ ├── layout.jsx │ ├── page.jsx │ └── second-page │ │ └── page.jsx ├── globals.css ├── head.jsx ├── i18n │ ├── client.js │ ├── index.js │ ├── locales │ │ ├── de │ │ │ ├── client-page.json │ │ │ ├── footer.json │ │ │ ├── second-page.json │ │ │ └── translation.json │ │ └── en │ │ │ ├── client-page.json │ │ │ ├── footer.json │ │ │ ├── second-page.json │ │ │ └── translation.json │ └── settings.js └── page.module.css ├── middleware.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages └── api │ └── hello.js └── public ├── favicon.ico └── vercel.svg /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # This configuration file was automatically generated by Gitpod. 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file) 3 | # and commit this file to your remote git repository to share the goodness with others. 4 | 5 | tasks: 6 | - init: npm install && npm run build 7 | command: npm run start 8 | 9 | 10 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "i18n-ally.localesPaths": [ 3 | "app/i18n", 4 | "app/i18n/locales" 5 | ] 6 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | 4 | 5 | ## Getting Started 6 | 7 | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/anilkk/nextjs-13-template-project) 8 | 9 | First, run the development server: 10 | 11 | ```bash 12 | npm run dev 13 | # or 14 | yarn dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 22 | 23 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 24 | 25 | ## Learn More 26 | 27 | To learn more about Next.js, take a look at the following resources: 28 | 29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 31 | 32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 33 | 34 | ## Deploy on Vercel 35 | 36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 37 | 38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 39 | -------------------------------------------------------------------------------- /app/[lng]/client-page/page.jsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import Link from 'next/link' 4 | import { useTranslation } from '../../i18n/client' 5 | import { Footer } from '../components/Footer/client' 6 | import { useState } from 'react' 7 | 8 | export default function Page({ params: { lng } }) { 9 | const { t } = useTranslation(lng, 'client-page') 10 | const [counter, setCounter] = useState(0) 11 | return ( 12 | <> 13 |

{t('title')}

14 |

{t('counter', { count: counter })}

15 |
16 | 17 | 18 |
19 | 20 | 23 | 24 |