|
1 |
| -This project was bootstrapped with [Create Next App](https://github.com/segmentio/create-next-app). |
| 1 | +<p align="center" style="background-color: white"> |
| 2 | + <a href="https://bragging-detector.vercel.app/"> |
| 3 | + <img src="https://bragging-detector.vercel.app/static/logo.png" height="200px" alt="自慢ディテクター" /> |
| 4 | + </a> |
| 5 | +</p> |
2 | 6 |
|
3 |
| -Find the most recent version of this guide at [here](https://github.com/segmentio/create-next-app/blob/master/lib/templates/default/README.md). And check out [Next.js repo](https://github.com/zeit/next.js) for the most up-to-date info. |
| 7 | +[](https://github.com/prettier/prettier) |
4 | 8 |
|
5 |
| -## Table of Contents |
| 9 | +会話中の文章を認識して自慢を検知します。自慢が検知されたときに効果音を鳴らすことができるアプリケーションです。 |
6 | 10 |
|
7 |
| -- [Questions? Feedback?](#questions-feedback) |
8 |
| -- [Folder Structure](#folder-structure) |
9 |
| -- [Available Scripts](#available-scripts) |
10 |
| - - [npm run dev](#npm-run-dev) |
11 |
| - - [npm run build](#npm-run-build) |
12 |
| - - [npm run start](#npm-run-start) |
13 |
| -- [Using CSS](#using-css) |
14 |
| -- [Adding Components](#adding-components) |
15 |
| -- [Fetching Data](#fetching-data) |
16 |
| -- [Custom Server](#custom-server) |
17 |
| -- [Syntax Highlighting](#syntax-highlighting) |
18 |
| -- [Using the `static` Folder](#using-the-static-folder) |
19 |
| -- [Deploy to Now](#deploy-to-now) |
20 |
| -- [Something Missing?](#something-missing) |
21 |
| - |
22 |
| -## Questions? Feedback? |
23 |
| - |
24 |
| -Check out [Next.js FAQ & docs](https://github.com/zeit/next.js#faq) or [let us know](https://github.com/segmentio/create-next-app/issues) your feedback. |
| 11 | +https://bragging-detector.vercel.app/ |
25 | 12 |
|
26 | 13 | ## Folder Structure
|
27 | 14 |
|
@@ -82,153 +69,3 @@ Starts the application in production mode.
|
82 | 69 | The application should be compiled with \`next build\` first.
|
83 | 70 |
|
84 | 71 | See the section in Next docs about [deployment](https://github.com/zeit/next.js/wiki/Deployment) for more information.
|
85 |
| - |
86 |
| -## Using CSS |
87 |
| - |
88 |
| -[`styled-jsx`](https://github.com/zeit/styled-jsx) is bundled with next to provide support for isolated scoped CSS. The aim is to support "shadow CSS" resembling of Web Components, which unfortunately [do not support server-rendering and are JS-only](https://github.com/w3c/webcomponents/issues/71). |
89 |
| - |
90 |
| -```jsx |
91 |
| -export default () => ( |
92 |
| - <div> |
93 |
| - Hello world |
94 |
| - <p>scoped!</p> |
95 |
| - <style jsx>{` |
96 |
| - p { |
97 |
| - color: blue; |
98 |
| - } |
99 |
| - div { |
100 |
| - background: red; |
101 |
| - } |
102 |
| - @media (max-width: 600px) { |
103 |
| - div { |
104 |
| - background: blue; |
105 |
| - } |
106 |
| - } |
107 |
| - `}</style> |
108 |
| - </div> |
109 |
| -) |
110 |
| -``` |
111 |
| - |
112 |
| -Read more about [Next's CSS features](https://github.com/zeit/next.js#css). |
113 |
| - |
114 |
| -## Adding Components |
115 |
| - |
116 |
| -We recommend keeping React components in `./components` and they should look like: |
117 |
| - |
118 |
| -### `./components/simple.js` |
119 |
| - |
120 |
| -```jsx |
121 |
| -const Simple = () => <div>Simple Component</div> |
122 |
| - |
123 |
| -export default Simple // don't forget to export default! |
124 |
| -``` |
125 |
| - |
126 |
| -### `./components/complex.js` |
127 |
| - |
128 |
| -```jsx |
129 |
| -import { Component } from 'react' |
130 |
| - |
131 |
| -class Complex extends Component { |
132 |
| - state = { |
133 |
| - text: 'World' |
134 |
| - } |
135 |
| - |
136 |
| - render() { |
137 |
| - const { text } = this.state |
138 |
| - return <div>Hello {text}</div> |
139 |
| - } |
140 |
| -} |
141 |
| - |
142 |
| -export default Complex // don't forget to export default! |
143 |
| -``` |
144 |
| - |
145 |
| -## Fetching Data |
146 |
| - |
147 |
| -You can fetch data in `pages` components using `getInitialProps` like this: |
148 |
| - |
149 |
| -### `./pages/stars.js` |
150 |
| - |
151 |
| -```jsx |
152 |
| -const Page = props => <div>Next stars: {props.stars}</div> |
153 |
| - |
154 |
| -Page.getInitialProps = async ({ req }) => { |
155 |
| - const res = await fetch('https://api.github.com/repos/zeit/next.js') |
156 |
| - const json = await res.json() |
157 |
| - const stars = json.stargazers_count |
158 |
| - return { stars } |
159 |
| -} |
160 |
| - |
161 |
| -export default Page |
162 |
| -``` |
163 |
| - |
164 |
| -For the initial page load, `getInitialProps` will execute on the server only. `getInitialProps` will only be executed on the client when navigating to a different route via the `Link` component or using the routing APIs. |
165 |
| - |
166 |
| -_Note: `getInitialProps` can **not** be used in children components. Only in `pages`._ |
167 |
| - |
168 |
| -Read more about [fetching data and the component lifecycle](https://github.com/zeit/next.js#fetching-data-and-component-lifecycle) |
169 |
| - |
170 |
| -## Custom Server |
171 |
| - |
172 |
| -Want to start a new app with a custom server? Run `create-next-app --example customer-server custom-app` |
173 |
| - |
174 |
| -Typically you start your next server with `next start`. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc |
175 |
| - |
176 |
| -This example makes `/a` resolve to `./pages/b`, and `/b` resolve to `./pages/a`: |
177 |
| - |
178 |
| -```jsx |
179 |
| -const { createServer } = require('http') |
180 |
| -const { parse } = require('url') |
181 |
| -const next = require('next') |
182 |
| - |
183 |
| -const dev = process.env.NODE_ENV !== 'production' |
184 |
| -const app = next({ dev }) |
185 |
| -const handle = app.getRequestHandler() |
186 |
| - |
187 |
| -app.prepare().then(() => { |
188 |
| - createServer((req, res) => { |
189 |
| - // Be sure to pass `true` as the second argument to `url.parse`. |
190 |
| - // This tells it to parse the query portion of the URL. |
191 |
| - const parsedUrl = parse(req.url, true) |
192 |
| - const { pathname, query } = parsedUrl |
193 |
| - |
194 |
| - if (pathname === '/a') { |
195 |
| - app.render(req, res, '/b', query) |
196 |
| - } else if (pathname === '/b') { |
197 |
| - app.render(req, res, '/a', query) |
198 |
| - } else { |
199 |
| - handle(req, res, parsedUrl) |
200 |
| - } |
201 |
| - }).listen(3000, err => { |
202 |
| - if (err) throw err |
203 |
| - console.log('> Ready on http://localhost:3000') |
204 |
| - }) |
205 |
| -}) |
206 |
| -``` |
207 |
| - |
208 |
| -Then, change your `start` script to `NODE_ENV=production node server.js`. |
209 |
| - |
210 |
| -Read more about [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) |
211 |
| - |
212 |
| -## Syntax Highlighting |
213 |
| - |
214 |
| -To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered. |
215 |
| - |
216 |
| -## Deploy to Now |
217 |
| - |
218 |
| -[now](https://zeit.co/now) offers a zero-configuration single-command deployment. |
219 |
| - |
220 |
| -1. Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`. |
221 |
| - |
222 |
| -2. Run `now` from your project directory. You will see a **now.sh** URL in your output like this: |
223 |
| - |
224 |
| - ``` |
225 |
| - > Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard) |
226 |
| - ``` |
227 |
| -
|
228 |
| - Paste that URL into your browser when the build is complete, and you will see your deployed app. |
229 |
| -
|
230 |
| -You can find more details about [`now` here](https://zeit.co/now). |
231 |
| -
|
232 |
| -## Something Missing? |
233 |
| -
|
234 |
| -If you have ideas for how we could improve this readme or the project in general, [let us know](https://github.com/segmentio/create-next-app/issues) or [contribute some!](https://github.com/segmentio/create-next-app/edit/master/lib/templates/default/README.md) |
0 commit comments