A Next.js egy népszerű webfejlesztési (akár fullstack) keretrendszer, amely a React könyvtárra épül, és lehetővé teszi a szerveroldali renderelést, valamint statikus weboldalak generálását, ezáltal javítva a fejlesztési időt és a weboldalak teljesítményét.
Ezt a technológiát a 2016-os megjelenése óta fejlesztők és vállalatok százezrei használják, többek között olyan cégek, mint a Vercel, a GitHub, a Netflix, a TikTok, a Twitch, a Hulu, a Nike, az Adidas, az IKEA, az Uber és a HBO Max.
npx create-next-app@latest
Majd interaktív lépések:
Need to install the following packages:
[email protected]*
Ok to proceed? (y) y
What is your project named? projekt_neve
Would you like to use the recommended Next.js defaults? » No, customize settings
Would you like to use TypeScript? No / Yes
Which linter would you like to use? ESLint
Would you like to use React Compiler? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside asrc/directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the import alias (@/*by default)? No / Yes
.vscode/extensions.json (majd a felajánlott VS Code bővítmények telepítése)
{
"recommendations": [
"dbaeumer.vscode-eslint",
"csstools.postcss",
"esbenp.prettier-vscode",
"bradlc.vscode-tailwindcss",
"formulahendry.auto-rename-tag",
"nextpress.nextpress-snippets",
"abdulowhab.json-to-ts-type",
"tomoki1207.pdf",
"humao.rest-client",
]
}
.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug client-side in Edge",
"type": "msedge",
"request": "launch",
"url": "http://localhost:8080",
},
{
"name": "Debug client-side in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
},
{
"name": "Debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev"
},
{
"name": "Debug full stack",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/next/dist/bin/next",
"runtimeArgs": ["--inspect"],
"skipFiles": ["<node_internals>/**"],
"serverReadyAction": {
"action": "debugWithEdge",
"killOnServerStop": true,
"pattern": "- Local:.+(https?://.+)",
"uriFormat": "%s",
"webRoot": "${workspaceFolder}"
}
}
]
}
.vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"editor.mouseWheelZoom": true,
"editor.wordWrap": "on",
"editor.minimap.enabled": false,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always"
},
"eslint.validate": ["typescript", "react", "typescriptreact", "javascript", "javascriptreact"],
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"git.enableSmartCommit": true,
"git.confirmSync": false,
"git.pruneOnFetch": true,
"git.autofetch": true,
"git.autofetchPeriod": 60,
"typescript.tsdk": "./node_modules/typescript/lib",
"typescript.preferences.importModuleSpecifier": "non-relative",
"javascript.preferences.importModuleSpecifier": "non-relative",
"workbench.editor.customLabels.patterns": {
"**/app/**/page.tsx" : "${dirname} - Page",
"**/app/**/layout.tsx" : "${dirname} - Layout",
"**/components/**/index.tsx" : "${dirname} - Component",
}
}
.vscode/tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "dev",
"group": {
"kind": "build",
"isDefault": true
}
},
{
"type": "npm",
"script": "test",
"group": {
"kind": "test",
"isDefault": true
}
}
]
}
1.3 Prettier és ESLint kiegészítők telepítése, beállítása, elemek (osztályok, property-k, importok) sorba rendezése
npm i -D prettier prettier-plugin-tailwindcss eslint-config-prettier eslint-plugin-react @trivago/prettier-plugin-sort-imports
prettier.config.cjs állomány létrehozása(másolása) a projekt főkönyvtárába
module.exports = {
singleQuote: false,
semi: true,
trailingComma: "all",
tabWidth: 2,
printWidth: 100,
plugins: [
require.resolve("@trivago/prettier-plugin-sort-imports"),
require.resolve("prettier-plugin-tailwindcss"), // mindig utolsó
],
importOrder: ["<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
importOrderSeparation: false,
importOrderSortSpecifiers: true,
tailwindFunctions: ["clsx"],
tailwindStylesheet: "./app/globals.css",
};
Prettier scriptek hozzáadása a package.json-ba:
...
"scripts": {
...
"format": "prettier --check --ignore-path .gitignore .",
"format:fix": "prettier --write --ignore-path .gitignore ."
}
eslint.config.mjs
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
import prettier from "eslint-config-prettier/flat";
import { defineConfig, globalIgnores } from "eslint/config";
const eslintConfig = defineConfig([
...nextVitals,
...nextTs,
prettier,
{
rules: {
"react/jsx-sort-props": [
1,
{
callbacksLast: true,
shorthandFirst: false,
shorthandLast: false,
multiline: "ignore",
ignoreCase: true,
noSortAlphabetically: false,
reservedFirst: false,
locale: "auto",
},
],
},
},
// Override default ignores of eslint-config-next.
globalIgnores([
// Default ignores of eslint-config-next:
".next/**",
"out/**",
"build/**",
"next-env.d.ts",
]),
]);
export default eslintConfig;
Kép optimalizáció kikapcsolása, így bárhonnan tölthetünk le képeket (vagy meg kell adni a forrás URL-t):
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
// Disable React Strict Mode
// reactStrictMode: false,
// Disable image optimization
images: {
unoptimized: true,
},
};
export default nextConfig;
Teljesen Tailwind CSS alapú, "összefogja" Bootstrap szerűen a Tailwind osztályokat
npm i -D daisyui@latest
@import "tailwindcss";
@plugin "daisyui";
@custom-variant dark (&:where(.dark, .dark *));
html {
data-scroll-behavior: smooth;
}
Backend API hívásokhoz, egyszerűbben használható, mint a beépített fetch()
npm install axios
Felugró toast üzenetekhez https://react-hot-toast.com/docs
npm install react-hot-toast
layout.tsx bővítése a Toaster elemmel:
import type { Metadata } from "next";
import { Toaster } from "react-hot-toast";
import "./globals.css";
export const metadata: Metadata = {
title: "next-frontend-starter",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<Toaster position="bottom-right" toastOptions={{ duration: 5000 }} />
{children}
</body>
</html>
);
}
npm install zustand
A main layout.tsx bővítése és egyszerűsítése:
import type { Metadata } from "next";
import { Toaster } from "react-hot-toast";
import "./globals.css";
export const metadata: Metadata = {
title: "next-frontend-starter",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<Toaster position="bottom-right" toastOptions={{ duration: 5000 }} />
{children}
</body>
</html>
);
}
Dátumok és időpontok kezeléséhez https://day.js.org/
npm install dayjs
Hompage: https://github.com/lukeed/clsx#readme
npm i clsx
"use client";
import { clsx } from "clsx";
import dayjs from "dayjs";
import { SunMoon } from "lucide-react";
import { useEffect } from "react";
import toast from "react-hot-toast";
import { useGlobalStore } from "@/store/globalStore";
export default function HomePage() {
// Using Zustand global store for state management example
const { loggedUser, setLoggedUser } = useGlobalStore();
const { lightTheme, setLightTheme } = useGlobalStore();
useEffect(() => {
toast.success(`Render on: ${dayjs().format("YYYY.MM.DD HH:mm:ss")}`);
}); // no dependency array to demonstrate re-render toast
function handleThemeToggle() {
setLightTheme(!lightTheme);
document.documentElement.classList.toggle("dark", lightTheme);
}
return (
<div className="flex min-h-screen flex-col items-center justify-center bg-gray-200 py-2 dark:bg-gray-800">
<h1 className={clsx("mb-6 text-3xl font-bold", lightTheme ? "text-black" : "text-white")}>
Hello, {loggedUser || ""}! 😎
</h1>
<input
className="input input-primary"
type="text"
value={loggedUser || ""}
onChange={(e) => setLoggedUser(e.target.value)}
/>
<button className="btn mt-4 btn-primary" onClick={handleThemeToggle}>
<SunMoon className="mr-2" size={24} />
Toggle Theme
</button>
</div>
);
}
- React.js
- Next.js
- Tailwind CSS
- daisyUI
- Typescript
- Zustand
- Day.js
- DevDocs
- Fetch API
- Axios with TypeScript
- Fetch API with Typescript
- Lucide-react icons
- GetEmoji
- clsx
A plugin az 1–17 kategória (funkcionális logika) szerint rendez, nem ABC-sorrendben, hanem a Tailwind buildlogika alapján.
- Layout: Ezek határozzák meg az elem megjelenésének alapját:
container, box-decoration-slice, box-border, block, inline-block, flex, grid, table, contents, hidden, ...
- Box model / Display properties:
float, clear, isolation, object-contain, overflow-auto, overscroll-none, ...
- Positioning:
static, fixed, absolute, relative, sticky, inset-0, top-0, right-0, bottom-0, left-0, z-10, ...
- Flexbox & Grid:
flex-row, flex-col, flex-wrap, place-content-center, items-center, justify-between, gap-4, grid-cols-2, ...
- Box sizing & Spacing:
w-*, min-w-*, max-w-*, h-*, p-*, m-*, space-x-*, space-y-*, ...
- Typography:
font-sans, text-sm, font-bold, leading-tight, tracking-wide, text-gray-700, italic, underline, ...
- Backgrounds:
bg-transparent, bg-gray-100, bg-gradient-to-r, from-blue-500, via-green-400, to-yellow-300, ...
- Borders:
border, border-0, border-2, border-gray-300, rounded-lg, rounded-full, ...
- Effects:
shadow, shadow-md, opacity-50, mix-blend-multiply, ...
- Filters:
blur, brightness-90, contrast-125, grayscale, sepia, ...
- Transitions & Animations:
transition, duration-300, ease-in-out, animate-bounce, ...
- Transforms:
scale-95, rotate-180, translate-x-2, transform-gpu, ...
- Interactivity / Behaviour:
cursor-pointer, select-none, resize, scroll-smooth, ...
- Accessibility:
sr-only, not-sr-only, ...
- Tables:
table-auto, table-fixed, border-collapse, border-separate, ...
- Transitions (state variants) Állapot prefixek külön kezelve, pl.:
hover:, focus:, active:, disabled:, group-hover:, peer-focus:, ...
- Responsive variants:
A médiaquery prefixek (sm:, md:, lg:, xl:, 2xl:) mindig a végén maradnak, de belül ugyanazt a sorrendet követik, mint az alap classok.