1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Example: with absolute imports (#2863)

* Add with-absolute-imports example

* Fix examples repo urls to point to master instead of v3-beta
This commit is contained in:
Sergio Xalambrí 2017-08-30 13:03:36 -05:00 committed by Tim Neutkens
parent a142848ef5
commit fd198d28a8
7 changed files with 72 additions and 6 deletions

View file

@ -0,0 +1,14 @@
{
"presets": "next/babel",
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"components": "./components"
}
}
]
]
}

View file

@ -0,0 +1,27 @@
# Example app with absolute imports
## How to use
Download the example [or clone the repo](https://github.com/zeit/next.js):
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-absolute-import
cd with-absolute-import
```
Install it and run:
```bash
npm install
npm run dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
```bash
now
```
## The idea behind the example
This example shows how to configure Babel to have absolute imports instead of relative imports without modifying the Webpack configuration.

View file

@ -0,0 +1,5 @@
export default () => (
<header>
<h1>Hello world!</h1>
</header>
)

View file

@ -0,0 +1,13 @@
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"babel-plugin-module-resolver": "^2.7.1",
"next": "^3.0.6",
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}

View file

@ -0,0 +1,7 @@
import Header from 'components/header.js'
export default () => (
<div>
<Header />
</div>
)

View file

@ -10,7 +10,7 @@ https://next-with-apollo-auth.now.sh
Download the example [or clone the repo](https://github.com/zeit/next.js):
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/v3-beta | tar -xz --strip=2 next.js-3-beta/examples/with-apollo-auth
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-apollo-auth
cd with-apollo-auth
```
@ -32,13 +32,13 @@ now
This is an extention of the _[with Apollo](https://github.com/zeit/next.js/tree/master/examples/with-apollo#the-idea-behind-the-example)_ example:
> [Apollo](http://dev.apollodata.com) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
>
>
> In this simple example, we integrate Apollo seamlessly with Next by wrapping our *pages* inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
>
>
> On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](http://dev.apollodata.com/react/server-side-rendering.html#getDataFromTree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
>
>
> This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
>
>
> *Note: Apollo uses Redux internally; if you're interested in integrating the client with your existing Redux store check out the [`with-apollo-and-redux`](https://github.com/zeit/next.js/tree/master/examples/with-apollo-and-redux) example.*
[graph.cool](https://www.graph.cool) can be setup with many different

View file

@ -5,7 +5,7 @@
Download the example [or clone the repo](https://github.com/zeit/next.js):
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/v3-beta | tar -xz --strip=2 next.js-3-beta/examples/with-dynamic-import
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-dynamic-import
cd with-dynamic-import
```