feat: add sign in and sign up page

.env.development

@@ -0,0 +1,7 @@
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_bGlnaHQtbGFicmFkb3ItNTEuY2xlcmsuYWNjb3VudHMuZGV2JA
+CLERK_SECRET_KEY=your_secret_key
+
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
+NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

next.config.js

@@ -7,7 +7,6 @@ module.exports = withBundleAnalyzer({
   eslint: {
     dirs: ['.'],
   },
-  output: 'export',
   poweredByHeader: false,
   trailingSlash: true,
   basePath: '',

package.json

@@ -26,6 +26,7 @@
     "postbuild": "next-sitemap"
   },
   "dependencies": {
+    "@clerk/nextjs": "^4.23.2",
     "next": "^13.4.13",
     "next-seo": "^6.1.0",
     "next-sitemap": "^4.1.8",

src/app/(auth)/(center)/layout.tsx

@@ -0,0 +1,11 @@
+export default function CenteredLayout({
+  children, // will be a page or nested layout
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      {children}
+    </div>
+  );
+}

src/app/(auth)/(center)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignIn } from '@clerk/nextjs';
+
+const SignInPage = () => <SignIn />;
+
+export default SignInPage;

src/app/(auth)/(center)/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignUp } from '@clerk/nextjs';
+
+const SignUpPage = () => <SignUp />;
+
+export default SignUpPage;

src/app/(auth)/layout.tsx

@@ -0,0 +1,9 @@
+import { ClerkProvider } from '@clerk/nextjs';
+
+export default function AuthLayout({
+  children, // will be a page or nested layout
+}: {
+  children: React.ReactNode;
+}) {
+  return <ClerkProvider>{children}</ClerkProvider>;
+}

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import '../styles/global.css';
+import '@/styles/global.css';
 
 import type { Metadata } from 'next';
 

src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import '../styles/global.css';
+import '@/styles/global.css';
 
 import type { AppProps } from 'next/app';