Personalizza il tuo progetto modificando nome, descrizione, tema e font. Tutte le configurazioni si trovano in un unico file.
Tutte le configurazioni dell'app si trovano in src/config.ts. Modifica questo file per personalizzare nome, descrizione, tema e font.
// src/config.ts
export const APP_CONFIG: AppConfig = {
name: "Canova",
description: "...",
version: "0.1.0",
theme: "light", // ← Cambia qui
language: "it",
mainFont: InterFont, // ← Cambia qui
monoFont: GeistMonoFont, // ← Cambia qui
};Il boilerplate supporta diversi temi predefiniti. Modifica la proprietà theme in src/config.ts.
// src/config.ts
export const APP_CONFIG: AppConfig = {
// ...
theme: "blue-dark", // Cambia questo valore
// ...
};Nota: Il tema può essere cambiato anche dall'utente finale usando il selettore di tema nell'angolo in alto a destra. Il valore in config.ts è il tema predefinito.
Puoi cambiare sia il font principale (per il testo) che il font monospace (per il codice). Il boilerplate usa Next.js Font Optimization per caricare i font da Google Fonts.
Il font principale viene usato per tutto il testo dell'applicazione.
Font moderno e leggibile, già configurato di default
import { Inter } from "next/font/google";const InterFont = Inter({ subsets: ["latin"], variable: "--font-main" });Font Google molto popolare
import { Roboto } from "next/font/google";const RobotoFont = Roboto({ subsets: ["latin"], weight: ["400", "500", "700"], variable: "--font-main" });Font sans-serif molto leggibile
import { Open_Sans } from "next/font/google";const OpenSansFont = Open_Sans({ subsets: ["latin"], variable: "--font-main" });Font geometrico moderno
import { Poppins } from "next/font/google";const PoppinsFont = Poppins({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--font-main" });// src/config.ts
import { Poppins } from "next/font/google";
const PoppinsFont = Poppins({
subsets: ["latin"],
weight: ["400", "500", "600", "700"],
variable: "--font-main"
});
export const APP_CONFIG: AppConfig = {
// ...
mainFont: PoppinsFont, // Sostituisci InterFont con il tuo font
// ...
};Il font monospace viene usato per codice, snippet e elementi tecnici.
Font monospace moderno, già configurato di default
import { Geist_Mono } from "next/font/google";const GeistMonoFont = Geist_Mono({ subsets: ["latin"], variable: "--font-mono" });Font monospace progettato per sviluppatori
import { JetBrains_Mono } from "next/font/google";const JetBrainsMonoFont = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono" });Font monospace con legature per codice
import { Fira_Code } from "next/font/google";const FiraCodeFont = Fira_Code({ subsets: ["latin"], variable: "--font-mono" });// src/config.ts
import { JetBrains_Mono } from "next/font/google";
const JetBrainsMonoFont = JetBrains_Mono({
subsets: ["latin"],
variable: "--font-mono"
});
export const APP_CONFIG: AppConfig = {
// ...
monoFont: JetBrainsMonoFont, // Sostituisci GeistMonoFont con il tuo font
// ...
};Suggerimento: Puoi trovare tutti i font disponibili su Google Fonts. Assicurati di importare il font correttamente seguendo la sintassi di Next.js Font.
src/config.tstheme - Tema dell'appmainFont - Font principalemonoFont - Font monospaceRiavvia il dev server per vedere le modifiche applicate.