"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", h1: "h1", h2: "h2", h3: "h3", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { id: "getting-started-with-nextjs", children: _jsx(_components.a, { className: "anchor-link", href: "#getting-started-with-nextjs", children: "Getting Started with Next.js" }) }), "\n", _jsx(_components.p, { children: "Next.js is a powerful React framework that enables you to build full-stack web applications. It provides many features out of the box that make development faster and more efficient." }), "\n", _jsx(_components.h2, { id: "what-is-nextjs", children: _jsx(_components.a, { className: "anchor-link", href: "#what-is-nextjs", children: "What is Next.js?" }) }), "\n", _jsxs(_components.p, { children: ["Next.js is a ", _jsx(_components.strong, { children: "React framework" }), " that gives you building blocks to create web applications. It handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application."] }), "\n", _jsx(_components.h3, { id: "key-features", children: _jsx(_components.a, { className: "anchor-link", href: "#key-features", children: "Key Features" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "Server-side Rendering (SSR)" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "Static Site Generation (SSG)" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "API Routes" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "File-based Routing" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "Image Optimization" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "TypeScript Support" }) }), "\n"] }), "\n", _jsx(_components.h2, { id: "installation", children: _jsx(_components.a, { className: "anchor-link", href: "#installation", children: "Installation" }) }), "\n", _jsx(_components.p, { children: "Getting started with Next.js is simple. You can create a new project using:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-bash", children: ["npx create-next-app@latest my-app\n", _jsx(_components.span, { className: "hljs-built_in", children: "cd" }), " my-app\nnpm run dev\n"] }) }), "\n", _jsx(_components.h2, { id: "project-structure", children: _jsx(_components.a, { className: "anchor-link", href: "#project-structure", children: "Project Structure" }) }), "\n", _jsx(_components.p, { children: "A typical Next.js project structure looks like this:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "my-app/\n├── app/\n│ ├── layout.tsx\n│ ├── page.tsx\n│ └── globals.css\n├── public/\n├── next.config.js\n└── package.json\n" }) }), "\n", _jsx(_components.h2, { id: "creating-pages", children: _jsx(_components.a, { className: "anchor-link", href: "#creating-pages", children: "Creating Pages" }) }), "\n", _jsx(_components.p, { children: "In Next.js 13+, pages are created using the App Router. Here's a simple example:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// app/about/page.tsx" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "About" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), ">"] }), "About Us", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), ">"] }), "Welcome to our about page!", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "styling", children: _jsx(_components.a, { className: "anchor-link", href: "#styling", children: "Styling" }) }), "\n", _jsx(_components.p, { children: "Next.js supports various styling options:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "CSS Modules" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "Styled JSX" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "Tailwind CSS" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "Sass/SCSS" }) }), "\n"] }), "\n", _jsx(_components.h3, { id: "example-with-tailwind-css", children: _jsx(_components.a, { className: "anchor-link", href: "#example-with-tailwind-css", children: "Example with Tailwind CSS" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "Button" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{ children }: { children: React.ReactNode }" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "button" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"" }), ">"] }), "\n {children}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "data-fetching", children: _jsx(_components.a, { className: "anchor-link", href: "#data-fetching", children: "Data Fetching" }) }), "\n", _jsx(_components.p, { children: "Next.js provides several methods for fetching data:" }), "\n", _jsx(_components.h3, { id: "server-components-recommended", children: _jsx(_components.a, { className: "anchor-link", href: "#server-components-recommended", children: "Server Components (Recommended)" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "getData" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " res = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "fetch" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"https://api.example.com/data\"" }), ");\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " res.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "();\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "Page" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " data = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "getData" }), "();\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "main" }), ">"] }), "{/* Render data */}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ";\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "api-routes", children: _jsx(_components.a, { className: "anchor-link", href: "#api-routes", children: "API Routes" }) }), "\n", _jsx(_components.p, { children: "Create API endpoints easily:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// app/api/hello/route.ts" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "GET" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Response" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "message" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Hello, World!\"" }), " });\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "deployment", children: _jsx(_components.a, { className: "anchor-link", href: "#deployment", children: "Deployment" }) }), "\n", _jsx(_components.p, { children: "Deploy your Next.js app to Vercel with zero configuration:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm i -g vercel\nvercel\n" }) }), "\n", _jsx(_components.h2, { id: "conclusion", children: _jsx(_components.a, { className: "anchor-link", href: "#conclusion", children: "Conclusion" }) }), "\n", _jsx(_components.p, { children: "Next.js is an excellent choice for building modern web applications. Its features like SSR, SSG, and API routes make it perfect for both static sites and dynamic applications." }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["Ready to start building? Check out the ", _jsx(_components.a, { href: "https://nextjs.org/docs", children: "official Next.js documentation" }), " for more detailed information."] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h1, { id: "contentblogtypescript-best-practicesmdx", children: _jsx(_components.a, { className: "anchor-link", href: "#contentblogtypescript-best-practicesmdx", children: "content/blog/typescript-best-practices.mdx" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "title: \"TypeScript Best Practices for Better Code Quality\"\ndescription: \"Discover essential TypeScript best practices that will help you write more maintainable, type-safe, and efficient code in your projects.\"\ndate: \"2024-01-10\"\ntags: [\"TypeScript\", \"JavaScript\", \"Best Practices\", \"Code Quality\"]\nfeatured: false\npublished: true\nauthor: \"Your Name\"" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h1, { id: "typescript-best-practices", children: _jsx(_components.a, { className: "anchor-link", href: "#typescript-best-practices", children: "TypeScript Best Practices" }) }), "\n", _jsx(_components.p, { children: "TypeScript has become the go-to choice for many developers when building large-scale applications. Here are some best practices to help you write better TypeScript code." }), "\n", _jsx(_components.h2, { id: "1-use-strict-mode", children: _jsx(_components.a, { className: "anchor-link", href: "#1-use-strict-mode", children: "1. Use Strict Mode" }) }), "\n", _jsxs(_components.p, { children: ["Always enable strict mode in your ", _jsx(_components.code, { children: "tsconfig.json" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-json", children: [_jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"compilerOptions\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"strict\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-literal", children: _jsx(_components.span, { className: "hljs-keyword", children: "true" }) }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"noImplicitAny\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-literal", children: _jsx(_components.span, { className: "hljs-keyword", children: "true" }) }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"strictNullChecks\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-literal", children: _jsx(_components.span, { className: "hljs-keyword", children: "true" }) }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"strictFunctionTypes\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-literal", children: _jsx(_components.span, { className: "hljs-keyword", children: "true" }) }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.h2, { id: "2-prefer-interfaces-over-type-aliases", children: _jsx(_components.a, { className: "anchor-link", href: "#2-prefer-interfaces-over-type-aliases", children: "2. Prefer Interfaces Over Type Aliases" }) }), "\n", _jsx(_components.p, { children: "For object shapes, prefer interfaces:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// ✅ Good" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), ";\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ";\n ", _jsx(_components.span, { className: "hljs-attr", children: "email" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ";\n}\n\n", _jsx(_components.span, { className: "hljs-comment", children: "// ❌ Avoid for object shapes" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), " = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), ";\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ";\n ", _jsx(_components.span, { className: "hljs-attr", children: "email" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ";\n};\n"] }) }), "\n", _jsx(_components.h2, { id: "3-use-union-types-effectively", children: _jsx(_components.a, { className: "anchor-link", href: "#3-use-union-types-effectively", children: "3. Use Union Types Effectively" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "type" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Status" }), " = ", _jsx(_components.span, { className: "hljs-string", children: "\"loading\"" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "\"success\"" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "\"error\"" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "handleStatus" }), "(", _jsx(_components.span, { className: "hljs-params", children: "status: Status" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "switch" }), " (status) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"loading\"" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"Loading...\"" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"success\"" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"Success!\"" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"error\"" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"Error occurred\"" }), ";\n ", _jsx(_components.span, { className: "hljs-attr", children: "default" }), ":\n ", _jsx(_components.span, { className: "hljs-comment", children: "// TypeScript will catch if we miss a case" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "exhaustiveCheck" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "never" }), " = status;\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " exhaustiveCheck;\n }\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "4-avoid-any-type", children: _jsxs(_components.a, { className: "anchor-link", href: "#4-avoid-any-type", children: ["4. Avoid ", _jsx(_components.code, { children: "any" }), " Type"] }) }), "\n", _jsxs(_components.p, { children: ["Instead of ", _jsx(_components.code, { children: "any" }), ", use more specific types:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// ❌ Bad" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "processData" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["data: ", _jsx(_components.span, { className: "hljs-built_in", children: "any" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " data.", _jsx(_components.span, { className: "hljs-property", children: "someProperty" }), ";\n}\n\n", _jsx(_components.span, { className: "hljs-comment", children: "// ✅ Good" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ApiResponse" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "unknown" }), ";\n ", _jsx(_components.span, { className: "hljs-attr", children: "status" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), ";\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "processData" }), "(", _jsx(_components.span, { className: "hljs-params", children: "response: ApiResponse" }), ") {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Use type guards or assertions" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (", _jsx(_components.span, { className: "hljs-keyword", children: "typeof" }), " response.", _jsx(_components.span, { className: "hljs-property", children: "data" }), " === ", _jsx(_components.span, { className: "hljs-string", children: "\"object\"" }), " && response.", _jsx(_components.span, { className: "hljs-property", children: "data" }), " !== ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ") {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Now TypeScript knows data is an object" }), "\n }\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "5-use-generic-types", children: _jsx(_components.a, { className: "anchor-link", href: "#5-use-generic-types", children: "5. Use Generic Types" }) }), "\n", _jsx(_components.p, { children: "Make your functions and classes reusable with generics:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "function" }), " identity(", _jsx(_components.span, { className: "hljs-attr", children: "arg" }), ": T): T {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " arg;\n}\n\n", _jsx(_components.span, { className: "hljs-comment", children: "// Usage" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " stringResult = ", _jsx(_components.span, { className: "hljs-title function_", children: "identity" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"hello\"" }), "); ", _jsx(_components.span, { className: "hljs-comment", children: "// string" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " numberResult = ", _jsx(_components.span, { className: "hljs-title function_", children: "identity" }), "(", _jsx(_components.span, { className: "hljs-number", children: "42" }), "); ", _jsx(_components.span, { className: "hljs-comment", children: "// number" }), "\n"] }) }), "\n", _jsx(_components.h2, { id: "conclusion-1", children: _jsx(_components.a, { className: "anchor-link", href: "#conclusion-1", children: "Conclusion" }) }), "\n", _jsx(_components.p, { children: "Following these TypeScript best practices will help you write more robust and maintainable code. Remember, TypeScript is there to help you catch errors early and improve your development experience." }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h1, { id: "contentblogtailwind-css-tipsmdx", children: _jsx(_components.a, { className: "anchor-link", href: "#contentblogtailwind-css-tipsmdx", children: "content/blog/tailwind-css-tips.mdx" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "title: \"Advanced Tailwind CSS Tips and Tricks\"\ndescription: \"Take your Tailwind CSS skills to the next level with these advanced tips, custom configurations, and optimization techniques.\"\ndate: \"2024-01-05\"\ntags: [\"Tailwind CSS\", \"CSS\", \"Frontend\", \"Styling\"]\nfeatured: true\npublished: true\nauthor: \"Your Name\"" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h1, { id: "advanced-tailwind-css-tips", children: _jsx(_components.a, { className: "anchor-link", href: "#advanced-tailwind-css-tips", children: "Advanced Tailwind CSS Tips" }) }), "\n", _jsx(_components.p, { children: "Tailwind CSS is more than just utility classes. Here are some advanced techniques to level up your Tailwind game." }), "\n", _jsx(_components.h2, { id: "custom-color-palette", children: _jsx(_components.a, { className: "anchor-link", href: "#custom-color-palette", children: "Custom Color Palette" }) }), "\n", _jsxs(_components.p, { children: ["Define your brand colors in ", _jsx(_components.code, { children: "tailwind.config.js" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-javascript", children: [_jsx(_components.span, { className: "hljs-variable language_", children: "module" }), ".", _jsx(_components.span, { className: "hljs-property", children: "exports" }), " = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "theme" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "extend" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "colors" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "brand" }), ": {\n ", _jsx(_components.span, { className: "hljs-number", children: "50" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#eff6ff\"" }), ",\n ", _jsx(_components.span, { className: "hljs-number", children: "500" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#3b82f6\"" }), ",\n ", _jsx(_components.span, { className: "hljs-number", children: "900" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"#1e3a8a\"" }), ",\n },\n },\n },\n },\n};\n"] }) }), "\n", _jsx(_components.h2, { id: "component-extraction", children: _jsx(_components.a, { className: "anchor-link", href: "#component-extraction", children: "Component Extraction" }) }), "\n", _jsxs(_components.p, { children: ["Use ", _jsx(_components.code, { children: "@apply" }), " directive for common patterns:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-css", children: [_jsx(_components.span, { className: "hljs-selector-class", children: ".btn-primary" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "@apply" }), " bg-blue-", _jsx(_components.span, { className: "hljs-number", children: "500" }), " ", _jsx(_components.span, { className: "hljs-attribute", children: "hover" }), ":bg-blue-", _jsx(_components.span, { className: "hljs-number", children: "700" }), " text-white font-bold py-", _jsx(_components.span, { className: "hljs-number", children: "2" }), " px-", _jsx(_components.span, { className: "hljs-number", children: "4" }), " rounded;\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "dark-mode-implementation", children: _jsx(_components.a, { className: "anchor-link", href: "#dark-mode-implementation", children: "Dark Mode Implementation" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-html", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-white dark:bg-gray-800 text-gray-900 dark:text-white\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-2xl font-bold\"" }), ">"] }), "Hello World", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Enable dark mode in your config:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-javascript", children: [_jsx(_components.span, { className: "hljs-variable language_", children: "module" }), ".", _jsx(_components.span, { className: "hljs-property", children: "exports" }), " = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "darkMode" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"class\"" }), ", ", _jsx(_components.span, { className: "hljs-comment", children: "// or 'media'" }), "\n ", _jsx(_components.span, { className: "hljs-comment", children: "// ..." }), "\n};\n"] }) }), "\n", _jsx(_components.h2, { id: "custom-utilities", children: _jsx(_components.a, { className: "anchor-link", href: "#custom-utilities", children: "Custom Utilities" }) }), "\n", _jsx(_components.p, { children: "Create your own utility classes:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-css", children: [_jsx(_components.span, { className: "hljs-keyword", children: "@layer" }), " utilities {\n ", _jsx(_components.span, { className: "hljs-selector-class", children: ".text-shadow" }), " {\n ", _jsx(_components.span, { className: "hljs-attribute", children: "text-shadow" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "2px" }), " ", _jsx(_components.span, { className: "hljs-number", children: "2px" }), " ", _jsx(_components.span, { className: "hljs-number", children: "4px" }), " ", _jsx(_components.span, { className: "hljs-built_in", children: "rgba" }), "(", _jsx(_components.span, { className: "hljs-number", children: "0" }), ", ", _jsx(_components.span, { className: "hljs-number", children: "0" }), ", ", _jsx(_components.span, { className: "hljs-number", children: "0" }), ", ", _jsx(_components.span, { className: "hljs-number", children: "0.1" }), ");\n }\n\n ", _jsx(_components.span, { className: "hljs-selector-class", children: ".scrollbar-hide" }), " {\n -ms-", _jsx(_components.span, { className: "hljs-attribute", children: "overflow" }), "-style: none;\n ", _jsx(_components.span, { className: "hljs-attribute", children: "scrollbar-width" }), ": none;\n }\n ", _jsx(_components.span, { className: "hljs-selector-class", children: ".scrollbar-hide" }), "::-webkit-scrollbar {\n ", _jsx(_components.span, { className: "hljs-attribute", children: "display" }), ": none;\n }\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "responsive-design", children: _jsx(_components.a, { className: "anchor-link", href: "#responsive-design", children: "Responsive Design" }) }), "\n", _jsx(_components.p, { children: "Master Tailwind's responsive system:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-html", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\"" }), ">"] }), "\n ", _jsx(_components.span, { className: "hljs-comment", children: "" }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n"] }) }), "\n", _jsx(_components.h2, { id: "performance-optimization", children: _jsx(_components.a, { className: "anchor-link", href: "#performance-optimization", children: "Performance Optimization" }) }), "\n", _jsx(_components.h3, { id: "purge-unused-css", children: _jsx(_components.a, { className: "anchor-link", href: "#purge-unused-css", children: "Purge Unused CSS" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-javascript", children: [_jsx(_components.span, { className: "hljs-variable language_", children: "module" }), ".", _jsx(_components.span, { className: "hljs-property", children: "exports" }), " = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "content" }), ": [\n ", _jsx(_components.span, { className: "hljs-string", children: "\"./pages/**/*.{js,ts,jsx,tsx}\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"./components/**/*.{js,ts,jsx,tsx}\"" }), ",\n ],\n ", _jsx(_components.span, { className: "hljs-comment", children: "// ..." }), "\n};\n"] }) }), "\n", _jsx(_components.h3, { id: "jit-mode-benefits", children: _jsx(_components.a, { className: "anchor-link", href: "#jit-mode-benefits", children: "JIT Mode Benefits" }) }), "\n", _jsx(_components.p, { children: "Just-In-Time compilation provides:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Faster build times" }), "\n", _jsx(_components.li, { children: "Smaller file sizes" }), "\n", _jsx(_components.li, { children: "All variants available" }), "\n", _jsx(_components.li, { children: "Arbitrary value support" }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-html", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"top-[117px] bg-[#1da1f2]\"" }), ">"] }), "\n ", _jsx(_components.span, { className: "hljs-comment", children: "" }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n"] }) }), "\n", _jsx(_components.h2, { id: "advanced-layout-techniques", children: _jsx(_components.a, { className: "anchor-link", href: "#advanced-layout-techniques", children: "Advanced Layout Techniques" }) }), "\n", _jsx(_components.h3, { id: "css-grid-with-tailwind", children: _jsx(_components.a, { className: "anchor-link", href: "#css-grid-with-tailwind", children: "CSS Grid with Tailwind" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-html", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"grid grid-cols-[200px_1fr_100px] gap-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "aside" }), ">"] }), "Sidebar", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "main" }), ">"] }), "Content", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "aside" }), ">"] }), "Widgets", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n"] }) }), "\n", _jsx(_components.h3, { id: "container-queries-future", children: _jsx(_components.a, { className: "anchor-link", href: "#container-queries-future", children: "Container Queries (Future)" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-html", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"@container\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "class" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"@sm:flex @md:grid @md:grid-cols-2\"" }), ">"] }), "\n ", _jsx(_components.span, { className: "hljs-comment", children: "" }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n"] }) }), "\n", _jsx(_components.h2, { id: "conclusion-2", children: _jsx(_components.a, { className: "anchor-link", href: "#conclusion-2", children: "Conclusion" }) }), "\n", _jsx(_components.p, { children: "These advanced Tailwind techniques will help you build more maintainable and efficient stylesheets. Remember to leverage Tailwind's configuration system to match your design system perfectly." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Blog

Getting Started with Next.js: A Complete Guide