|
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