22 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/libs/Arcjet.ts:
--------------------------------------------------------------------------------
1 | import arcjet, { shield } from '@arcjet/next';
2 |
3 | // Create a base Arcjet instance which can be imported and extended in each route.
4 | export default arcjet({
5 | // Get your site key from https://launch.arcjet.com/Q6eLbRE
6 | // Use `process.env` instead of Env to reduce bundle size in middleware
7 | key: process.env.ARCJET_KEY ?? '',
8 | // Identify the user by their IP address
9 | characteristics: ['ip.src'],
10 | rules: [
11 | // Protect against common attacks with Arcjet Shield
12 | shield({
13 | mode: 'LIVE', // will block requests. Use "DRY_RUN" to log only
14 | }),
15 | // Other rules are added in different routes
16 | ],
17 | });
18 |
--------------------------------------------------------------------------------
/src/libs/DB.ts:
--------------------------------------------------------------------------------
1 | import type { NodePgDatabase } from 'drizzle-orm/node-postgres';
2 | import type * as schema from '@/models/Schema';
3 | import { createDbConnection } from '@/utils/DBConnection';
4 | import { Env } from './Env';
5 |
6 | // Stores the db connection in the global scope to prevent multiple instances due to hot reloading with Next.js
7 | const globalForDb = globalThis as unknown as {
8 | drizzle: NodePgDatabase12 | {`👋 `} 13 | {t('hello_message', { email: user?.primaryEmailAddress?.emailAddress ?? '' })} 14 |
15 |16 | {t.rich('alternative_message', { 17 | url: () => ( 18 | 22 | Next.js Boilerplate Pro 23 | 24 | ), 25 | })} 26 |
27 |
23 | {t('count', { count })}
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/app/[locale]/(auth)/(center)/sign-in/[[...sign-in]]/page.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next';
2 | import { SignIn } from '@clerk/nextjs';
3 | import { getTranslations, setRequestLocale } from 'next-intl/server';
4 | import { getI18nPath } from '@/utils/Helpers';
5 |
6 | type ISignInPageProps = {
7 | params: Promise<{ locale: string }>;
8 | };
9 |
10 | export async function generateMetadata(props: ISignInPageProps): Promise
28 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/templates/BaseTemplate.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/nextjs-vite';
2 | import { NextIntlClientProvider } from 'next-intl';
3 | import messages from '@/locales/en.json';
4 | import { BaseTemplate } from './BaseTemplate';
5 |
6 | const meta = {
7 | title: 'Example/BaseTemplate',
8 | component: BaseTemplate,
9 | parameters: {
10 | layout: 'fullscreen',
11 | },
12 | decorators: [
13 | Story => (
14 | Children node
,
27 | leftNav: (
28 | <>
29 | {t('about_paragraph')}
33 | 34 |
35 | {`${t('translation_powered_by')} `}
36 |
40 | Crowdin
41 |
42 |
43 |
44 |
45 |
31 |
33 |
34 |
35 | {`${t('security_powered_by')} `}
36 |
40 | Arcjet
41 |
42 |
43 |
44 |
47 | {t('header', { slug })}
45 |{t('content')}
46 | 47 |
48 | {`${t('code_review_powered_by')} `}
49 |
53 | CodeRabbit
54 |
55 |
56 |
57 |
60 |
13 |
60 | );
61 | };
62 |
--------------------------------------------------------------------------------
/tests/e2e/Sanity.check.e2e.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 |
3 | // Checkly is a tool used to monitor deployed environments, such as production or preview environments.
4 | // It runs end-to-end tests with the `.check.e2e.ts` extension after each deployment to ensure that the environment is up and running.
5 | // With Checkly, you can monitor your production environment and run `*.check.e2e.ts` tests regularly at a frequency of your choice.
6 | // If the tests fail, Checkly will notify you via email, Slack, or other channels of your choice.
7 | // On the other hand, E2E tests ending with `*.e2e.ts` are only run before deployment.
8 | // You can run them locally or on CI to ensure that the application is ready for deployment.
9 |
10 | // BaseURL needs to be explicitly defined in the test file.
11 | // Otherwise, Checkly runtime will throw an exception: `CHECKLY_INVALID_URL: Only URL's that start with http(s)`
12 | // You can't use `goto` function directly with a relative path like with other *.e2e.ts tests.
13 | // Check the example at https://feedback.checklyhq.com/changelog/new-changelog-436
14 |
15 | test.describe('Sanity', () => {
16 | test.describe('Static pages', () => {
17 | test('should display the homepage', async ({ page, baseURL }) => {
18 | await page.goto(`${baseURL}/`);
19 |
20 | await expect(
21 | page.getByRole('heading', { name: 'Boilerplate Code for Your Next.js Project with Tailwind CSS' }),
22 | ).toBeVisible();
23 | });
24 |
25 | test('should navigate to the about page', async ({ page, baseURL }) => {
26 | await page.goto(`${baseURL}/`);
27 |
28 | await page.getByRole('link', { name: 'About' }).click();
29 |
30 | await expect(page).toHaveURL(/about$/);
31 |
32 | await expect(
33 | page.getByText('Welcome to our About page', { exact: false }),
34 | ).toBeVisible();
35 | });
36 |
37 | test('should navigate to the portfolio page', async ({ page, baseURL }) => {
38 | await page.goto(`${baseURL}/`);
39 |
40 | await page.getByRole('link', { name: 'Portfolio' }).click();
41 |
42 | await expect(page).toHaveURL(/portfolio$/);
43 |
44 | await expect(
45 | page.locator('main').getByRole('link', { name: /^Portfolio/ }),
46 | ).toHaveCount(6);
47 | });
48 | });
49 | });
50 |
--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from 'next';
2 | import withBundleAnalyzer from '@next/bundle-analyzer';
3 | import { withSentryConfig } from '@sentry/nextjs';
4 | import createNextIntlPlugin from 'next-intl/plugin';
5 | import './src/libs/Env';
6 |
7 | // Define the base Next.js configuration
8 | const baseConfig: NextConfig = {
9 | devIndicators: {
10 | position: 'bottom-right',
11 | },
12 | poweredByHeader: false,
13 | reactStrictMode: true,
14 | reactCompiler: true,
15 | outputFileTracingIncludes: {
16 | '/': ['./migrations/**/*'],
17 | },
18 | experimental: {
19 | turbopackFileSystemCacheForDev: true,
20 | },
21 | };
22 |
23 | // Initialize the Next-Intl plugin
24 | let configWithPlugins = createNextIntlPlugin('./src/libs/I18n.ts')(baseConfig);
25 |
26 | // Conditionally enable bundle analysis
27 | if (process.env.ANALYZE === 'true') {
28 | configWithPlugins = withBundleAnalyzer()(configWithPlugins);
29 | }
30 |
31 | // Conditionally enable Sentry configuration
32 | if (!process.env.NEXT_PUBLIC_SENTRY_DISABLED) {
33 | configWithPlugins = withSentryConfig(configWithPlugins, {
34 | // For all available options, see:
35 | // https://www.npmjs.com/package/@sentry/webpack-plugin#options
36 | org: process.env.SENTRY_ORGANIZATION,
37 | project: process.env.SENTRY_PROJECT,
38 |
39 | // Only print logs for uploading source maps in CI
40 | silent: !process.env.CI,
41 |
42 | // For all available options, see:
43 | // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
44 |
45 | // Upload a larger set of source maps for prettier stack traces (increases build time)
46 | widenClientFileUpload: true,
47 |
48 | // Upload a larger set of source maps for prettier stack traces (increases build time)
49 | reactComponentAnnotation: {
50 | enabled: true,
51 | },
52 |
53 | // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
54 | // This can increase your server load as well as your hosting bill.
55 | // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
56 | // side errors will fail.
57 | tunnelRoute: '/monitoring',
58 |
59 | // Automatically tree-shake Sentry logger statements to reduce bundle size
60 | disableLogger: true,
61 |
62 | // Disable Sentry telemetry
63 | telemetry: false,
64 | });
65 | }
66 |
67 | const nextConfig = configWithPlugins;
68 | export default nextConfig;
69 |
--------------------------------------------------------------------------------
/public/assets/images/arcjet-dark.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/assets/images/arcjet-light.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/proxy.ts:
--------------------------------------------------------------------------------
1 | import type { NextFetchEvent, NextRequest } from 'next/server';
2 | import { detectBot } from '@arcjet/next';
3 | import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
4 | import createMiddleware from 'next-intl/middleware';
5 | import { NextResponse } from 'next/server';
6 | import arcjet from '@/libs/Arcjet';
7 | import { routing } from './libs/I18nRouting';
8 |
9 | const handleI18nRouting = createMiddleware(routing);
10 |
11 | const isProtectedRoute = createRouteMatcher([
12 | '/dashboard(.*)',
13 | '/:locale/dashboard(.*)',
14 | ]);
15 |
16 | const isAuthPage = createRouteMatcher([
17 | '/sign-in(.*)',
18 | '/:locale/sign-in(.*)',
19 | '/sign-up(.*)',
20 | '/:locale/sign-up(.*)',
21 | ]);
22 |
23 | // Improve security with Arcjet
24 | const aj = arcjet.withRule(
25 | detectBot({
26 | mode: 'LIVE',
27 | // Block all bots except the following
28 | allow: [
29 | // See https://docs.arcjet.com/bot-protection/identifying-bots
30 | 'CATEGORY:SEARCH_ENGINE', // Allow search engines
31 | 'CATEGORY:PREVIEW', // Allow preview links to show OG images
32 | 'CATEGORY:MONITOR', // Allow uptime monitoring services
33 | ],
34 | }),
35 | );
36 |
37 | export default async function proxy(
38 | request: NextRequest,
39 | event: NextFetchEvent,
40 | ) {
41 | // Verify the request with Arcjet
42 | // Use `process.env` instead of Env to reduce bundle size in middleware
43 | if (process.env.ARCJET_KEY) {
44 | const decision = await aj.protect(request);
45 |
46 | if (decision.isDenied()) {
47 | return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
48 | }
49 | }
50 |
51 | // Clerk keyless mode doesn't work with i18n, this is why we need to run the middleware conditionally
52 | if (
53 | isAuthPage(request) || isProtectedRoute(request)
54 | ) {
55 | return clerkMiddleware(async (auth, req) => {
56 | if (isProtectedRoute(req)) {
57 | const locale = req.nextUrl.pathname.match(/(\/.*)\/dashboard/)?.at(1) ?? '';
58 |
59 | const signInUrl = new URL(`${locale}/sign-in`, req.url);
60 |
61 | await auth.protect({
62 | unauthenticatedUrl: signInUrl.toString(),
63 | });
64 | }
65 |
66 | return handleI18nRouting(req);
67 | })(request, event);
68 | }
69 |
70 | return handleI18nRouting(request);
71 | }
72 |
73 | export const config = {
74 | // Match all pathnames except for
75 | // - … if they start with `/_next`, `/_vercel` or `monitoring`
76 | // - … the ones containing a dot (e.g. `favicon.ico`)
77 | matcher: '/((?!_next|_vercel|monitoring|.*\\..*).*)',
78 | };
79 |
--------------------------------------------------------------------------------
/src/app/[locale]/(marketing)/portfolio/page.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next';
2 | import { getTranslations, setRequestLocale } from 'next-intl/server';
3 | import Image from 'next/image';
4 | import Link from 'next/link';
5 |
6 | type IPortfolioProps = {
7 | params: Promise<{ locale: string }>;
8 | };
9 |
10 | export async function generateMetadata(props: IPortfolioProps): Promise
14 |
15 |
36 |
37 | {props.children}
38 |
39 |
58 |
59 |
16 |
21 |
22 | 17 | {AppConfig.name} 18 |
19 |{t('description')}
20 |
23 |
28 |
29 |
34 |
35 | {t('presentation')}
34 | 35 |
36 | {Array.from(Array.from({ length: 6 }).keys()).map(elt => (
37 |
42 | {t('portfolio_name', { name: elt })}
43 |
44 | ))}
45 |
46 |
47 |
48 | {`${t('error_reporting_powered_by')} `}
49 |
53 | Sentry
54 |
55 | {` - ${t('coverage_powered_by')} `}
56 |
60 | Codecov
61 |
62 |
63 |
64 |
67 | {props.children}
93 | |
9 |
14 | |
22 |
23 |
24 | |
32 |
33 |
38 | |
46 |
|
49 |
50 | |
58 |
59 |
60 | |
68 |
69 |
70 | |
78 |
|
81 |
86 | |
94 |
95 |
100 | |
108 |
109 |
114 | |
122 |
|
125 |
126 | |
134 |
33 | {`Follow `} 34 | 40 | @Ixartz on Twitter 41 | 42 | {` for updates and more information about the boilerplate.`} 43 |
44 |45 | Boilerplate Code for Your Next.js Project with Tailwind CSS 46 |
47 |48 | Next.js Boilerplate is a developer-friendly starter code for Next.js projects, built with Tailwind CSS and TypeScript. 49 | {' '} 50 | 51 | ⚡️ 52 | 53 | {' '} 54 | Designed with developer experience in mind, it includes: 55 |
56 |-
57 |
- 🚀 Next.js with App Router support 58 |
- 🔥 TypeScript for type checking 59 |
- 💎 Tailwind CSS integration 60 |
- 61 | 🔒 Authentication with 62 | {' '} 63 | 67 | Clerk 68 | 69 | {' '} 70 | (includes passwordless, social, and multi-factor auth) 71 | 72 |
- 📦 ORM with DrizzleORM (PostgreSQL, SQLite, MySQL support) 73 |
- 74 | 💽 Dev database with PGlite and production with Neon (PostgreSQL) 75 | 76 |
- 77 | 🌐 Multi-language support (i18n) with next-intl and 78 | {' '} 79 | 83 | Crowdin 84 | 85 | 86 |
- 🔴 Form handling (React Hook Form) and validation (Zod) 87 |
- 📏 Linting and formatting (ESLint, Prettier) 88 |
- 🦊 Git hooks and commit linting (Husky, Commitlint) 89 |
- 🦺 Testing suite (Vitest, React Testing Library, Playwright) 90 |
- 🎉 Storybook for UI development 91 |
- 92 | 🐰 AI-powered code reviews with 93 | {' '} 94 | 98 | CodeRabbit 99 | 100 | 101 |
- 102 | 🚨 Error monitoring ( 103 | 107 | Sentry 108 | 109 | ) and logging (LogTape, an alternative to Pino.js) 110 | 111 |
- 🖥️ Monitoring as Code (Checkly) 112 |
- 113 | 🔐 Security and bot protection ( 114 | 118 | Arcjet 119 | 120 | ) 121 | 122 |
- 🤖 SEO optimization (metadata, JSON-LD, Open Graph tags) 123 |
- ⚙️ Development tools (VSCode config, bundler analyzer, changelog generation) 124 |
126 | Our sponsors' exceptional support has made this project possible. 127 | Their services integrate seamlessly with the boilerplate, and we 128 | recommend trying them out. 129 |
130 |{t('sponsors_title')}
131 |
4 |
5 | 
10 |
11 |
|
22 |
23 | |
30 |
31 |
32 | 
36 | |
39 |
40 |
41 | 
45 | 
52 | |
55 |
58 |
59 | 
63 | |
66 |
67 |
68 | 
72 | |
75 |
76 |
77 | 
81 | |
84 |
87 |
88 | 
92 | |
95 |
96 |
97 | 
101 | |
104 |
105 |
106 | 
110 | |
113 |
116 |
117 | 
118 |
119 | |
120 | 121 | 122 | Add your logo here 123 | 124 | | 125 |
|
574 |
575 | |
582 |
583 |
584 |
588 | |
591 |
592 |
593 |
597 |
604 | |
607 |
|
610 |
611 |
615 | |
618 |
619 |
620 |
624 | |
627 |
628 |
629 |
633 | |
636 |
|
639 |
640 |
644 | |
647 |
648 |
649 |
653 | |
656 |
657 |
658 |
662 | |
665 |
|
668 |
669 |
670 |
671 | |
672 | 673 | 674 | Add your logo here 675 | 676 | | 677 |