JSX Magic
Aleph.js uses swc to transpile your code to browser, with that we have the power to check your JSX code at compilation phase to implement some features with the native JSX elements.
Custom Head Meta
You can add page meta tags under the native head
element, and these tags will be wrote to the page html with SSR enabled. This is useful the Search Engine Optimization (SEO).
import React from 'https://esm.sh/react'
export default function Index({ Page, pageProps }) {
return (
<>
<head>
<title>Aleph.js</title>
<meta name="description" content="The React Framework in Deno." />
<meta name="keywords" content="alephjs,react,framework,deno" />
<meta name="og:image" content="/twitter-image.png" />
</head>
<h1>Aleph.js</h1>
</>
);
}
Importing Style from Files
Import CSS files via link
tag, and clean up them automatically when page(component) unactivated, or get better CSS Modules experience.
import React from 'https://esm.sh/react'
export default function App() {
return (
<>
<link rel="stylesheet" href="../style/app.css" />
<link rel="stylesheet" href="../style/page.module.css" />
<h1 className="$title">Hi :)</h1>
</>
)
}
Inline Style
Aleph.js provides a built-in CSS-in-JS
solution out-of-the-box using the native JSX style
element.
import React from 'https://esm.sh/react'
export default function App() {
const color = 'black'
return (
<>
<style>{`
h1 {
font-size: 2em;
color: ${color};
}
`}</style>
<h1>Hi :)</h1>
</>
)
}
Linking Between Pages
Linking between pages in Aleph.js is very easy, just use the a
tag with page path.
You can set the rel
to get some extra feature:
- nav: play as
NavLink
- preload: preload page's component code and SSR data
import React from "https://esm.sh/react";
export default function Nav() {
return (
<>
<a href="/">Home</a>
<a rel="nav" href="/about">About</a>
<a rel="preload" href="/contact">Contact</a>
</>
);
}
Custom Scripts
Aleph.js allows you to add custom scripts to your app, and these scripts will be appended to the html body at build time.
import React from 'https://esm.sh/react'
export default function App({ Page, pageProps }) {
return (
<>
<Page {...pageProps} />
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-1234567890"
></script>
<script>{`
window.dataLayer = window.dataLayer || [];
function gtag(){
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-1234567890');
`}</script>
</>
)
}
Authors: | Edit this page on Github