michi.vonah/nextjs
1
0
Fork 0
mirror of https://github.com/michivonah/nextjs.git synced 2025-12-22 22:16:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

styling, fonts & take notes

Browse source
This commit is contained in:
Michi 2025-04-19 10:56:29 +02:00
parent 968a0b7de9
commit 3ba540fb87
4 changed files with 39 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

27
README.md
View file

@ -184,6 +184,33 @@ import { FaPlay } from "react-icons/fa";
<FaPlay /> <FaPlay />
``` ```
## Fonts
Fonts are managed in the file `/app/ui/fonts.ts`. Next.js is be default able to import fonts from Google Fonts. After importing a font the subset has to be defined. In my case its the latin subset.
```ts
import { Inter } from 'next/font/google';
export const inter = Inter({subsets: ['latin'], weight: ['400', '700']});
```
Afterwards the font can be added to the `layout.tsx` so its visible all over the application.
There also a `className` has to be added to the body, so that the font will be rendered.
```tsx
import {inter} from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}
```
The same way other fonts can be imported and also just applied on single objects.
## Ressources ## Ressources
- [Next.js Installation](https://nextjs.org/docs/app/getting-started/installation) - [Next.js Installation](https://nextjs.org/docs/app/getting-started/installation)
- [Next.js React Foundations Course](https://nextjs.org/learn/react-foundations) - [Next.js React Foundations Course](https://nextjs.org/learn/react-foundations)

5
dashboard-app-course/app/layout.tsx
View file

@ -1,3 +1,6 @@
import '@/app/ui/global.css';
import {inter} from '@/app/ui/fonts';
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
@ -5,7 +8,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body>{children}</body> <body className={`${inter.className} antialiased`}>{children}</body>
</html> </html>
); );
} }

6
dashboard-app-course/app/page.tsx
View file

@ -1,16 +1,18 @@
import AcmeLogo from '@/app/ui/acme-logo'; import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline'; import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link'; import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
export default function Page() { export default function Page() {
return ( return (
<main className="flex min-h-screen flex-col p-6"> <main className="flex min-h-screen flex-col p-6">
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52"> <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
{/* <AcmeLogo /> */} {<AcmeLogo />}
</div> </div>
<div className="mt-4 flex grow flex-col gap-4 md:flex-row"> <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20"> <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
<p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}> <div className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"/>
<p className={`text-xl text-gray-800 md:text-3xl md:leading-normal ${lusitana.className} antialiased`}>
<strong>Welcome to Acme.</strong> This is the example for the{' '} <strong>Welcome to Acme.</strong> This is the example for the{' '}
<a href="https://nextjs.org/learn/" className="text-blue-500"> <a href="https://nextjs.org/learn/" className="text-blue-500">
Next.js Learn Course Next.js Learn Course

4
dashboard-app-course/app/ui/fonts.ts Normal file
View file

@ -0,0 +1,4 @@
import { Inter, Lusitana } from 'next/font/google';
export const inter = Inter({subsets: ['latin']});
export const lusitana = Lusitana({subsets: ['latin'], weight: ['400', '700']});