rayan/next.js
1
0
Fork 0
Code Issues Pull Requests Actions 12 Packages Projects Releases Wiki Activity

first commit
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Details
Test examples / Test Examples (22) (push) Has been cancelled
Details
Lock Threads / action (push) Has been cancelled
Details
Trigger Release / start (push) Has been cancelled
Details
Stale issue handler / stale (push) Has been cancelled
Details
Update Font Data / create-pull-request (push) Has been cancelled
Details
build-and-deploy / deploy-target (push) Has been cancelled
Details
build-and-deploy / build (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
Details
build-and-deploy / build-wasm (web) (push) Has been cancelled
Details
build-and-deploy / Deploy preview tarball (push) Has been cancelled
Details
build-and-deploy / Potentially publish release (push) Has been cancelled
Details
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
Details
build-and-deploy / Deploy examples (push) Has been cancelled
Details
build-and-deploy / thank you, build (push) Has been cancelled
Details
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Details
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Details
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Details
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Details
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Details
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Details
Update React / create-pull-request (push) Has been cancelled
Details
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Details
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Arian Tron
2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
examples/with-paste-typescript/.gitignore vendored Normal file
View File

@@ -0,0 +1,40 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

29
examples/with-paste-typescript/README.md Normal file
View File

@@ -0,0 +1,29 @@
# Example app with Paste and TypeScript
This example features how to use [Paste](https://paste.twilio.design) as the component library within a Next.js app with [TypeScript](https://www.typescriptlang.org/).
Next.js and Paste have built-in TypeScript declarations, so you'll get autocompletion for their modules straight away.
[`pages/_app.tsx`](pages/_app.tsx) is used to connect `Paste`'s Theme Provider so the pages can have app-wide styles.
## Deploy your own
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-paste-typescript&project-name=with-paste-typescript&repository-name=with-paste-typescript)
## How to use
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
```bash
npx create-next-app --example with-paste-typescript with-paste-typescript-app
```
```bash
yarn create next-app --example with-paste-typescript with-paste-typescript-app
```
```bash
pnpm create next-app --example with-paste-typescript with-paste-typescript-app
```
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

20
examples/with-paste-typescript/package.json Normal file
View File

@@ -0,0 +1,20 @@
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@twilio-paste/core": "^4.2.4",
"@twilio-paste/icons": "^3.10.5",
"next": "10.0.4",
"prop-types": "^15.7.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "^14.14.16",
"typescript": "^4.1.3"
}
}

11
examples/with-paste-typescript/pages/_app.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { Theme } from "@twilio-paste/core/theme";
function MyApp({ Component, pageProps }) {
return (
<Theme.Provider theme="default">
<Component {...pageProps} />
</Theme.Provider>
);
}
export default MyApp;

77
examples/with-paste-typescript/pages/index.tsx Normal file
View File

@@ -0,0 +1,77 @@
import Head from "next/head";
import { Anchor } from "@twilio-paste/core/anchor";
import { Heading } from "@twilio-paste/core/heading";
import { Box } from "@twilio-paste/core/box";
import { Paragraph } from "@twilio-paste/core/paragraph";
import { ListItem, UnorderedList } from "@twilio-paste/core/list";
import { ArrowForwardIcon } from "@twilio-paste/icons/cjs/ArrowForwardIcon";
import { Separator } from "@twilio-paste/core/separator";
export default function Home() {
return (
<Box as="main" padding="space70">
<Head>
<title>Paste Next.js App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Heading as="h1" variant="heading10">
Welcome to the{" "}
<Anchor href="https://paste.twilio.design">Paste Next.js App!</Anchor>
</Heading>
<Paragraph>
Everything you need to get started using Paste in a Production app.
Start by editing <code>pages/index.tsx</code>
</Paragraph>
<Separator orientation="horizontal" verticalSpacing="space120" />
<Heading as="h2" variant="heading20">
Useful links
</Heading>
<UnorderedList>
<ListItem>
<Heading as="h3" variant="heading30">
<Anchor href="https://paste.twilio.design">
<Box as="span" display="flex" alignItems="center">
Paste Documentation{" "}
<ArrowForwardIcon decorative size="sizeIcon60" />
</Box>
</Anchor>
</Heading>
<Paragraph>
Start here. Find in-depth information about using the Paste Design
System to build your Next app.
</Paragraph>
</ListItem>
<ListItem>
<Heading as="h3" variant="heading30">
<Anchor href="https://nextjs.org/docs">
<Box as="span" display="flex" alignItems="center">
Next.js Documentation{" "}
<ArrowForwardIcon decorative size="sizeIcon60" />
</Box>
</Anchor>
</Heading>
<Paragraph>
Find in-depth information about Next.js features and API.
</Paragraph>
</ListItem>
<ListItem>
<Heading as="h3" variant="heading30">
<Anchor href="https://vercel.com/new">
<Box as="span" display="flex" alignItems="center">
Deploy <ArrowForwardIcon decorative size="sizeIcon60" />
</Box>
</Anchor>
</Heading>
<Paragraph>
Instantly deploy your Next.js site to a public URL with Vercel.
</Paragraph>
</ListItem>
</UnorderedList>
</Box>
);
}

BIN
examples/with-paste-typescript/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

19
examples/with-paste-typescript/tsconfig.json Normal file
View File

@@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}