Skip to content

Commit 0fa9aaa

Browse files
author
username
committed
first commit
0 parents  commit 0fa9aaa

15 files changed

+6096
-0
lines changed

‎.gitignore

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
### https://raw.github.com/github/gitignore/656f766bfc75f912d611a973158be0fe9e2ba2f2/node.gitignore
2+
3+
# Logs
4+
logs
5+
*.log
6+
npm-debug.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
13+
# Directory for instrumented libs generated by jscoverage/JSCover
14+
lib-cov
15+
16+
# Coverage directory used by tools like istanbul
17+
coverage
18+
19+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
20+
.grunt
21+
22+
# node-waf configuration
23+
.lock-wscript
24+
25+
# Compiled binary addons (http://nodejs.org/api/addons.html)
26+
build/Release
27+
28+
# Dependency directory
29+
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
30+
node_modules
31+
32+
# Optional npm cache directory
33+
.npm
34+
35+
# Optional REPL history
36+
.node_repl_history
37+
38+
39+
### https://raw.github.com/github/gitignore/656f766bfc75f912d611a973158be0fe9e2ba2f2/Global/osx.gitignore
40+
41+
.DS_Store
42+
.AppleDouble
43+
.LSOverride
44+
45+
# Icon must end with two \r
46+
Icon
47+
48+
# Thumbnails
49+
._*
50+
51+
# Files that might appear in the root of a volume
52+
.DocumentRevisions-V100
53+
.fseventsd
54+
.Spotlight-V100
55+
.TemporaryItems
56+
.Trashes
57+
.VolumeIcon.icns
58+
59+
# Directories potentially created on remote AFP share
60+
.AppleDB
61+
.AppleDesktop
62+
Network Trash Folder
63+
Temporary Items
64+
.apdisk
65+
66+
67+
### https://raw.github.com/github/gitignore/656f766bfc75f912d611a973158be0fe9e2ba2f2/Global/windows.gitignore
68+
69+
# Windows image file caches
70+
Thumbs.db
71+
ehthumbs.db
72+
73+
# Folder config file
74+
Desktop.ini
75+
76+
# Recycle Bin used on file shares
77+
$RECYCLE.BIN/
78+
79+
# Windows Installer files
80+
*.cab
81+
*.msi
82+
*.msm
83+
*.msp
84+
85+
# Windows shortcuts
86+
*.lnk
87+
88+
# application
89+
.next

‎README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# nextjs-typescript-scss-example
2+
3+
This is a sample of `Next.js` `React` `Typescript` `CSS Modules`.
4+
5+
## Features
6+
7+
* yarn v1.3
8+
* next.js v16
9+
* React v16
10+
* typescript v2.8
11+
* tslint
12+
* prettier
13+
* scss
14+
15+
## Requirement
16+
17+
yarn or npm
18+
19+
## Usage
20+
21+
```bash
22+
# git clone
23+
git clone https://github.com/treetips/nextjs-typescript-scss-example.git
24+
cd nextjs-typescript-scss-example
25+
# install node_modules
26+
yarn install
27+
# start
28+
yarn dev
29+
# browse
30+
http://localhost:3000/
31+
```

‎components/Layout.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import "../styles/main.scss";
2+
import * as styles from "../styles/main.scss";
3+
import Link from "next/link";
4+
import Head from "next/head";
5+
6+
export const Layout = props => (
7+
<div>
8+
<Head>
9+
<title>{props.title}</title>
10+
<meta charSet="utf-8" />
11+
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
12+
<link rel="stylesheet" href="/_next/static/style.css" />
13+
</Head>
14+
15+
<header className={styles.header}>
16+
<div>
17+
<img src="/static/images/nextjs-logo.png" className={styles.logo} />
18+
</div>
19+
</header>
20+
21+
<article className={styles.container}>{props.children}</article>
22+
23+
<footer>
24+
<hr />
25+
<nav className={styles.footer}>
26+
<Link href="/">
27+
<a>Home</a>
28+
</Link>
29+
&nbsp;
30+
<Link href="/cowsay/">
31+
<a>cowsay</a>
32+
</Link>
33+
</nav>
34+
</footer>
35+
</div>
36+
);

‎next.config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const withTypescript = require("@zeit/next-typescript");
2+
const withSass = require("@zeit/next-sass");
3+
4+
module.exports = withTypescript(
5+
withSass({
6+
webpack(config, options) {
7+
return config;
8+
},
9+
cssModules: true,
10+
sassLoaderOptions: {},
11+
typescriptLoaderOptions: {
12+
transpileOnly: false,
13+
},
14+
})
15+
);

‎package.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "tree-maps",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "node server.js",
8+
"dev-original": "next",
9+
"build": "next build",
10+
"start": "next start",
11+
"lint":
12+
"tslint -c ./tslint.json --exclude **/*.d.ts --exclude ./node_modules --project . --fix **/*.tsx",
13+
"test": "echo \"Error: no test specified\" && exit 1"
14+
},
15+
"keywords": [],
16+
"author": "",
17+
"license": "ISC",
18+
"dependencies": {
19+
"next": "^5.1.0",
20+
"node-sass": "^4.8.3",
21+
"react": "^16.3.2",
22+
"react-dom": "^16.3.2"
23+
},
24+
"devDependencies": {
25+
"@types/react": "^16.3.12",
26+
"@zeit/next-css": "^0.1.5",
27+
"@zeit/next-sass": "^0.1.2",
28+
"@zeit/next-typescript": "^0.1.1",
29+
"cowsay-browser": "^1.1.8",
30+
"prettier": "^1.12.1",
31+
"tslint": "^5.9.1",
32+
"tslint-config-prettier": "^1.12.0",
33+
"tslint-config-standard": "^7.0.0",
34+
"tslint-plugin-prettier": "^1.3.0",
35+
"typescript": "^2.8.3"
36+
}
37+
}

‎pages/cowsay/index.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import cowsay from "cowsay-browser";
2+
import { Layout } from "../../components/Layout";
3+
4+
export default () => (
5+
<Layout title="COWSAY !!">
6+
<pre>{cowsay.say({ text: "cowsay !!" })}</pre>
7+
</Layout>
8+
);

‎pages/index.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as styles from "../styles/main.scss";
2+
import { Layout } from "../components/Layout";
3+
4+
export default () => (
5+
<Layout title="HOME">
6+
<h1 className={styles.pageTitle}>Next.js example</h1>
7+
<ul className="list">
8+
<li>Typescript</li>
9+
<li>SCSS</li>
10+
<li>CSS Modules</li>
11+
<li>TSLint</li>
12+
<li>Prettier</li>
13+
<li>example</li>
14+
</ul>
15+
</Layout>
16+
);

‎server.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const { createServer } = require("http");
2+
const { parse } = require("url");
3+
const next = require("next");
4+
5+
const port = parseInt(process.env.PORT, 10) || 3000;
6+
const dev = process.env.NODE_ENV !== "production";
7+
const app = next({ dev });
8+
const handle = app.getRequestHandler();
9+
10+
app.prepare().then(() => {
11+
createServer((req, res) => {
12+
const parsedUrl = parse(req.url, true);
13+
const { pathname, query } = parsedUrl;
14+
15+
if (pathname.length > 1 && pathname.slice(-1) === "/") {
16+
app.render(req, res, pathname.slice(0, -1), query);
17+
} else {
18+
handle(req, res, parsedUrl);
19+
}
20+
}).listen(port, err => {
21+
if (err) throw err;
22+
console.log(`> Ready on http://localhost:${port}`);
23+
});
24+
});

‎static/images/nextjs-logo.png

7.73 KB
Loading

‎styles/main.scss

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
$hoge-font-size: 2em;
2+
3+
html,
4+
body {
5+
background-color: #f7f7f7;
6+
}
7+
8+
p {
9+
margin: 0;
10+
}
11+
12+
.header {
13+
display: flex;
14+
justify-content: center;
15+
}
16+
17+
.container {
18+
display: flex;
19+
justify-content: center;
20+
}
21+
22+
.footer {
23+
display: flex;
24+
justify-content: space-around;
25+
}
26+
27+
.logo {
28+
width: 350px;
29+
display: block;
30+
}
31+
32+
li:nth-child(odd) {
33+
color: blue;
34+
font-style: italic;
35+
font-weight: bold;
36+
}
37+
38+
li:nth-child(even) {
39+
color: green;
40+
text-decoration: underline;
41+
}
42+
43+
.pageTitle {
44+
font-size: $hoge-font-size;
45+
color: #4c4c4c;
46+
}

‎tsconfig.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"compileOnSave": false,
3+
"compilerOptions": {
4+
"target": "esnext",
5+
"module": "esnext",
6+
"jsx": "preserve",
7+
"allowJs": true,
8+
"moduleResolution": "node",
9+
"allowSyntheticDefaultImports": true,
10+
"noUnusedLocals": true,
11+
"noUnusedParameters": true,
12+
"removeComments": false,
13+
"preserveConstEnums": true,
14+
"sourceMap": true,
15+
"skipLibCheck": true,
16+
"strictNullChecks": true,
17+
"baseUrl": ".",
18+
"typeRoots": ["./node_modules/@types"],
19+
"lib": ["dom", "es2015", "es2016"]
20+
}
21+
}

‎tslint.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"rulesDirectory": ["tslint-plugin-prettier"],
3+
"extends": ["tslint-config-standard", "tslint-config-prettier"],
4+
"rules": {
5+
"prettier": true
6+
}
7+
}

‎typings.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
declare module "*.scss" {
2+
interface IClassNames {
3+
[className: string]: string;
4+
}
5+
const classNames: IClassNames;
6+
export = classNames;
7+
}

‎typings/styled-jsx.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import "react";
2+
3+
declare module "react" {
4+
interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
5+
jsx?: boolean;
6+
global?: boolean;
7+
}
8+
}

0 commit comments

Comments
 (0)