Our great sponsors
-
-
nextjs-tailwind-styled-components-typescript
Discontinued This is a boilerplate for Nextjs with Tailwind CSS, Styled Components and TypeScript.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
twin.macro
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
import type { NextPage } from 'next'; import Image from 'next/image'; import { Container, Main, Title, TitleLink, Description, DescriptionCodeHighlight, Cards, Card, CardTitle, Footer, FooterCopyRight, } from '../styles/Home.styles'; const HomePage: NextPage = () => { return ( Welcome to <TitleLink href="https://nextjs.org">Next.js!TitleLink> Title> <Description> Get started by editing{' '} <DescriptionCodeHighlight>pages/index.tsxDescriptionCodeHighlight> Description> <Cards> <Card href="https://nextjs.org/docs"> <CardTitle>Documentation →CardTitle> <p>Find in-depth information about Next.js features and API.p> Card> <Card href="https://nextjs.org/learn"> <CardTitle>Learn →CardTitle> <p>Learn about Next.js in an interactive course with quizzes!p> Card> <Card href="https://github.com/vercel/next.js/tree/canary/examples"> <CardTitle>Examples →CardTitle> <p>Discover and deploy boilerplate example Next.js projects.p> Card> <Card href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer" > <h2>Deploy →h2> <p> Instantly deploy your Next.js site to a public URL with Vercel. p> Card> Cards> Main> <Footer> <FooterCopyRight href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer" > Powered by{' '} <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> FooterCopyRight> Footer> Container> ); }; export default HomePage;
The source code for this tutorial is available on GitHub
import type { NextPage } from 'next'; import Image from 'next/image'; import { Container, Main, Title, TitleLink, Description, DescriptionCodeHighlight, Cards, Card, CardTitle, Footer, FooterCopyRight, } from '../styles/Home.styles'; const HomePage: NextPage = () => { return ( Welcome to <TitleLink href="https://nextjs.org">Next.js!TitleLink> Title> <Description> Get started by editing{' '} <DescriptionCodeHighlight>pages/index.tsxDescriptionCodeHighlight> Description> <Cards> <Card href="https://nextjs.org/docs"> <CardTitle>Documentation →CardTitle> <p>Find in-depth information about Next.js features and API.p> Card> <Card href="https://nextjs.org/learn"> <CardTitle>Learn →CardTitle> <p>Learn about Next.js in an interactive course with quizzes!p> Card> <Card href="https://github.com/vercel/next.js/tree/canary/examples"> <CardTitle>Examples →CardTitle> <p>Discover and deploy boilerplate example Next.js projects.p> Card> <Card href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer" > <h2>Deploy →h2> <p> Instantly deploy your Next.js site to a public URL with Vercel. p> Card> Cards> Main> <Footer> <FooterCopyRight href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer" > Powered by{' '} <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> FooterCopyRight> Footer> Container> ); }; export default HomePage;
twin.macro