Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c154a87

Browse files
khasty720khasty720
authored
Add with-reactstrap example (vercel#15474)
## Summary This PR adds a Next.js example using [Reactsrap](https://reactstrap.github.io/)
1 parent ceeb6c3 commit c154a87

File tree

9 files changed

+212
-0
lines changed

9 files changed

+212
-0
lines changed

‎examples/with-reactstrap/.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎examples/with-reactstrap/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# reactstrap Example
2+
3+
This example shows how to use Next.js with [reactstrap](https://reactstrap.github.io/).
4+
5+
## Deploy your own
6+
7+
Deploy the example using [Vercel](https://vercel.com):
8+
9+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/vercel/next.js/tree/canary/examples/with-reactstrap)
10+
11+
## How to use
12+
13+
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
14+
15+
```bash
16+
npx create-next-app --example with-reactstrap with-reactstrap-app
17+
# or
18+
yarn create next-app --example with-reactstrap with-reactstrap-app
19+
```
20+
21+
Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

‎examples/with-reactstrap/package.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "with-reactstrap",
3+
"version": "0.0.1",
4+
"scripts": {
5+
"dev": "next dev",
6+
"build": "next build",
7+
"start": "next start"
8+
},
9+
"dependencies": {
10+
"bootstrap": "^4.5.0",
11+
"next": "latest",
12+
"react": "^16.13.1",
13+
"react-dom": "^16.13.1",
14+
"reactstrap": "^8.5.1"
15+
}
16+
}

‎examples/with-reactstrap/pages/_app.jsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import '../styles/index.css'
2+
3+
export default function MyApp({ Component, pageProps }) {
4+
return <Component {...pageProps} />
5+
}

‎examples/with-reactstrap/pages/index.jsx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import Head from 'next/head'
2+
import {
3+
Container,
4+
Row,
5+
Col,
6+
Button,
7+
Card,
8+
CardText,
9+
CardTitle,
10+
CardBody,
11+
} from 'reactstrap'
12+
13+
export default function Home() {
14+
return (
15+
<Container className="md-container">
16+
<Head>
17+
<title>ReactJS with reactstrap</title>
18+
<link rel="icon" href="/favicon-32x32.png" />
19+
</Head>
20+
<Container>
21+
<h1>
22+
Welcome to <a href="https://nextjs.org">Next.js!</a>
23+
</h1>
24+
<p>
25+
Get started by editing <code>pages/index.js</code>
26+
</p>
27+
<Container>
28+
<Row>
29+
<Col sm="6">
30+
<Card className="my-3">
31+
<CardBody>
32+
<CardTitle tag="h5">Documentation</CardTitle>
33+
<CardText>
34+
Find in-depth information about Next.js features and API.
35+
</CardText>
36+
<Button color="primary" href="https://nextjs.org/docs">
37+
More &rarr;
38+
</Button>
39+
</CardBody>
40+
</Card>
41+
</Col>
42+
<Col sm="6">
43+
<Card className="my-3">
44+
<CardBody>
45+
<CardTitle tag="h5">Learn</CardTitle>
46+
<CardText>
47+
Learn about Next.js in an interactive course with quizzes!
48+
</CardText>
49+
<Button color="primary" href="https://nextjs.org/learn">
50+
More &rarr;
51+
</Button>
52+
</CardBody>
53+
</Card>
54+
</Col>
55+
</Row>
56+
<Row>
57+
<Col sm="6">
58+
<Card className="my-3">
59+
<CardBody>
60+
<CardTitle tag="h5">Examples</CardTitle>
61+
<CardText>
62+
Discover and deploy boilerplate example Next.js projects.
63+
</CardText>
64+
<Button
65+
color="primary"
66+
href="https://github.com/vercel/next.js/tree/master/examples"
67+
>
68+
More &rarr;
69+
</Button>
70+
</CardBody>
71+
</Card>
72+
</Col>
73+
<Col sm="6">
74+
<Card className="my-3">
75+
<CardBody>
76+
<CardTitle tag="h5">Deploy</CardTitle>
77+
<CardText>
78+
Instantly deploy your Next.js site to a public URL with
79+
Vercel.
80+
</CardText>
81+
<Button
82+
color="primary"
83+
href="https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=example&utm_campaign=next-example"
84+
>
85+
More &rarr;
86+
</Button>
87+
</CardBody>
88+
</Card>
89+
</Col>
90+
</Row>
91+
</Container>
92+
</Container>
93+
94+
<footer className="cntr-footer">
95+
<a
96+
href="https://vercel.com?filter=next.js&utm_source=github&utm_medium=example&utm_campaign=next-example"
97+
target="_blank"
98+
rel="noopener noreferrer"
99+
>
100+
Powered by{' '}
101+
<img src="/vercel.svg" alt="Vercel Logo" className="sml-logo" />
102+
</a>
103+
</footer>
104+
</Container>
105+
)
106+
}

‎examples/with-reactstrap/public/favicon-32x32.png

880 Bytes
Loading

‎examples/with-reactstrap/public/favicon.ico

14.7 KB
Binary file not shown.

‎examples/with-reactstrap/public/vercel.svg

Lines changed: 4 additions & 0 deletions
Loading

‎examples/with-reactstrap/styles/index.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* ensure all pages have Bootstrap CSS */
2+
@import '~bootstrap/dist/css/bootstrap.min.css';
3+
4+
.md-container {
5+
max-width: 800px;
6+
padding-top: 2rem;
7+
}
8+
9+
.sml-card {
10+
width: 22rem;
11+
margin: 1rem 0;
12+
}
13+
14+
.cntr-footer {
15+
height: 80px;
16+
margin-top: 20px;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
border-top: 1px solid #ccc;
21+
}
22+
23+
.sml-logo {
24+
height: 1em;
25+
margin-left: 10px;
26+
}

0 commit comments

Comments
 (0)