diff --git a/README.md b/README.md index 27ed3e3d1..354a6fc8e 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Next js starter banner

-๐Ÿš€ Boilerplate and Starter for Next.js with App Router support, Tailwind CSS and TypeScript โšก๏ธ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, PostCSS, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and [Turso](https://turso.tech/?utm_source=nextjsstarterbp), Error Monitoring with [Sentry](https://sentry.io), Monitoring as Code with [Checkly](https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate), Storybook, Multi-language (i18n), One-Click Deploy on [Netlify](https://www.netlify.com), and more. +๐Ÿš€ Boilerplate and Starter for Next.js with App Router support, Tailwind CSS and TypeScript โšก๏ธ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, PostCSS, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and [Turso](https://turso.tech/?utm_source=nextjsstarterbp), Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo), Monitoring as Code with [Checkly](https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate), Storybook, Multi-language (i18n), One-Click Deploy on [Netlify](https://www.netlify.com), and more. Clone this project and use it to create your own [Next.js](https://nextjs.org) project. You can check a [Next js templates demo](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/). @@ -37,6 +37,15 @@ Clone this project and use it to create your own [Next.js](https://nextjs.org) p + + + + + + Sentry + + + @@ -55,13 +64,13 @@ Clone this project and use it to create your own [Next.js](https://nextjs.org) p + + Upstash - - @@ -76,6 +85,8 @@ Clone this project and use it to create your own [Next.js](https://nextjs.org) p React SaaS Boilerplate Next.js + + Add your logo here @@ -109,8 +120,8 @@ Developer experience first, extremely flexible code structure and only keep what - ๐Ÿงช Integration and E2E Testing with Playwright - ๐Ÿ‘ท Run tests on pull request with GitHub Actions - ๐ŸŽ‰ Storybook for UI development -- ๐Ÿšจ Error Monitoring with [Sentry](https://sentry.io) -- โ˜‚๏ธ Code coverage with [Codecov](https://codecov.io) +- ๐Ÿšจ Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo) +- โ˜‚๏ธ Code coverage with [Codecov](https://about.codecov.io/codecov-free-trial/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo) - ๐Ÿ–ฅ๏ธ Monitoring as Code with [Checkly](https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate) - ๐ŸŽ Automatic changelog generation with Semantic Release - ๐Ÿ” Visual testing with Percy (Optional) @@ -337,13 +348,13 @@ During the setup, you need to define the `DATABASE_URL` and `DATABASE_AUTH_TOKEN ### Error Monitoring -The project uses [Sentry](https://sentry.io) to monitor errors. For development environment, you don't need to do anything: NextJS Boilerplate is already configured to use Sentry and Spotlight (Sentry for Development). All errors will be automatically sent to your local Spotlight instance. So, you can try the Sentry experience locally. +The project uses [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo) to monitor errors. For development environment, you don't need to do anything: NextJS Boilerplate is already configured to use Sentry and Spotlight (Sentry for Development). All errors will be automatically sent to your local Spotlight instance. So, you can try the Sentry experience locally. For production environment, you need to create a Sentry account and create a new project. Then, in `next.config.mjs`, you need to update the `org` and `project` attribute in `withSentryConfig` function. You also need to add your Sentry DSN in `sentry.client.config.ts`, `sentry.edge.config.ts` and `sentry.server.config.ts`. ### Code coverage -NextJS Boilerplate relies on [Codecov](https://codecov.io) for code coverage reporting solution. To use Codecov, create a Codecov account and connect it to your GitHub account. On your Codecov dashboard, it should display a list of your repositories. Select the repository you want to enable Codecov for and copy the token. Then, in your GitHub Actions, you need to define the `CODECOV_TOKEN` environment variable and paste the token you copied. +NextJS Boilerplate relies on [Codecov](https://about.codecov.io/codecov-free-trial/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo) for code coverage reporting solution. To use Codecov, create a Codecov account and connect it to your GitHub account. On your Codecov dashboard, it should display a list of your repositories. Select the repository you want to enable Codecov for and copy the token. Then, in your GitHub Actions, you need to define the `CODECOV_TOKEN` environment variable and paste the token you copied. Be sure to create the `CODECOV_TOKEN` as a Github Actions secret, do not paste it directly into your source code. @@ -432,6 +443,15 @@ See [LICENSE](LICENSE) for more information. + + + + + + Sentry + + + @@ -450,13 +470,13 @@ See [LICENSE](LICENSE) for more information. + + Upstash - - @@ -471,6 +491,8 @@ See [LICENSE](LICENSE) for more information. React SaaS Boilerplate Next.js + + Add your logo here diff --git a/public/assets/images/sentry-dark.png b/public/assets/images/sentry-dark.png new file mode 100644 index 000000000..4b586a868 Binary files /dev/null and b/public/assets/images/sentry-dark.png differ diff --git a/public/assets/images/sentry-white.png b/public/assets/images/sentry-white.png new file mode 100644 index 000000000..3c431ae4d Binary files /dev/null and b/public/assets/images/sentry-white.png differ diff --git a/src/app/[locale]/(unauth)/portfolio/[slug]/page.tsx b/src/app/[locale]/(unauth)/portfolio/[slug]/page.tsx index efc0cb9de..4631f61ed 100644 --- a/src/app/[locale]/(unauth)/portfolio/[slug]/page.tsx +++ b/src/app/[locale]/(unauth)/portfolio/[slug]/page.tsx @@ -1,3 +1,4 @@ +import Image from 'next/image'; import { useTranslations } from 'next-intl'; import { getTranslations } from 'next-intl/server'; @@ -30,6 +31,33 @@ const PortfolioDetail = (props: IPortfolioDetailProps) => { <>

{t('header', { slug: props.params.slug })}

{t('content')}

+ +
+ {`${t('error_reporting_powered_by')} `} + + Sentry + {' '} + - {`${t('coverage_powered_by')} `} + + Codecov + +
+ + + Sentry + ); }; diff --git a/src/locales/en.json b/src/locales/en.json index d74be6008..de66c4c16 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -43,7 +43,9 @@ "meta_title": "Portfolio {slug}", "meta_description": "Portfolio {slug} description", "header": "Portfolio {slug}", - "content": "Created a set of promotional materials and branding elements for a corporate event. Crafted a visually unified theme, encompassing a logo, posters, banners, and digital assets. Integrated the client's brand identity while infusing it with a contemporary and innovative approach. Garnered favorable responses from event attendees, resulting in a successful event with heightened participant engagement and increased brand visibility." + "content": "Created a set of promotional materials and branding elements for a corporate event. Crafted a visually unified theme, encompassing a logo, posters, banners, and digital assets. Integrated the client's brand identity while infusing it with a contemporary and innovative approach. Garnered favorable responses from event attendees, resulting in a successful event with heightened participant engagement and increased brand visibility.", + "error_reporting_powered_by": "Error reporting powered by", + "coverage_powered_by": "Code coverage powered by" }, "SignIn": { "meta_title": "Sign in",