- Notifications
You must be signed in to change notification settings - Fork0
A minimalistic framework for universal server-rendered React applications
License
JavaScriptExpert/next.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Next.js is a minimalistic framework for server-rendered React applications.
The file-system is the main API. Every.js file becomes a route that gets automatically processed and rendered.
Populatepages/index.js inside your project:
import React from 'react'export default () => ( <div>Welcome to next.js!</div>)and then just runnext and go tohttp://localhost:3000
So far, we get:
- Automatic transpilation and bundling (with webpack and babel)
- Hot code reloading
- Server rendering and indexing
Everyimport you declare gets bundled and served with each page
import React from 'react'import cowsay from 'cowsay'export default () => ( <pre>{ cowsay('hi there!') }</pre>)That means pages never load unneccessary code!
We useAphrodite to provide a great built-in solution for CSS modularization
import React from 'react'import { css, StyleSheet } from 'next/css'export default () => { <div className={ css(styles.main) }> Hello world </div>})const styles = StyleSheet.create({ main: { background: 'red', '@media (max-width: 600px)': { background: 'blue' } }})We expose a built-in component for appending elements to the<head> of the page.
import React from 'react'import Head from 'next/head'export default () => ( <Head> <title>My page title</title> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> </Head> <p>Hello world!</p>)When state, lifecycle hooks or initial data population you can export aReact.Component:
import React from 'react'export default class extends React.Component { async getInitialProps ({ isServer, req }) { return isServer ? { userAgent: req.headers.userAgent } : { userAgent: navigator.userAgent } } render () { return <div> Hello World {this.props.userAgent} </div> }}Client-side transitions between routes are enabled via a<Link> component
import React from 'react'import Link from 'next/link'export default () => ( <div>Click <Link href="/about"><a>here</a></Link> to read more</div>)import React from 'react'export default () => ( <p>Welcome to About!</p>)Client-side routing behaves exactly like the native UA:
- The component is fetched
- If it defines
getInitialProps, data is fetched. If an error occurs,_error.jsis rendered - After 1 and 2 complete,
pushStateis performed and the new component rendered
Each top-level component receives aurl property with the following API:
path-Stringof the current path excluding the query stringquery-Objectwith the parsed query string. Defaults to{}push(url)- performs apushStatecall associated with the current componentreplace(url)- performs areplaceStatecall associated with the current componentpushTo(url)- performs apushStatecall that renders the newurl. This is equivalent to following a<Link>replaceTo(url)- performs areplaceStatecall that renders the newurl
404 or 500 errors are handled both client and server side by a default componenterror.js. If you wish to override it, define a_error.js:
import React from 'react'export default ({ statusCode }) => ( <p>An error { statusCode } occurred</p>)To deploy, run:
next buildnext startFor example, to deploy withnow apackage.json like follows is recommended:
{ "name": "my-app", "dependencies": { "next": "latest" }, "scripts": { "dev": "next", "build": "next build", "start": "next start" }}About
A minimalistic framework for universal server-rendered React applications
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Languages
- JavaScript100.0%