Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Server rendering with Next.js #462

Closed
scf4 opened this issue May 2, 2017 · 9 comments
Closed

Server rendering with Next.js #462

scf4 opened this issue May 2, 2017 · 9 comments

Comments

@scf4
Copy link

scf4 commented May 2, 2017

Hey, I've managed to get things running with Next.js, but it seems server rendering doesn't include CSS.

Is there an API to grab the CSS for the page when server rendering? Like in this example with styled-components: https://github.com/zeit/next.js/blob/master/examples/with-styled-components/pages/_document.js

Thanks!
@scf4
Copy link
Author

scf4 commented May 2, 2017 •
edited
Loading

Sidenote:

import { View, Text, StyleSheet } from 'react-native';

export default () =>
  <View style={{ backgroundColor: 'blue' }}>
    <Text style={{ fontFamily: 'Comic Sans MS'}}>
      testing
    </Text>
  </View>

The server-rendered version doesn't have a blue background. But it does if I set {{ background: 'blue' }} (afaik background isn't a valid RN prop), because it sets it as inline CSS on the div's style property.

Is this intended behaviour?

@necolas
Copy link
Owner

necolas commented May 2, 2017

Server-rendering guide: https://github.com/necolas/react-native-web/blob/master/docs/guides/getting-started.md#server-side-rendering

If there's an issue with the server-rendering styles, please open a separate issue with steps to reproduce. Thanks

@necolas necolas closed this as completed May 2, 2017
@scf4
Copy link
Author

scf4 commented May 2, 2017

Not sure how I missed that. Thanks Nicolas!

@scf4
Copy link
Author

scf4 commented May 2, 2017

Here's my solution below for anyone looking to integrate with Next.js, or if anyone has a better solution to propose:

pages/_document.js:

import Document, { Head, Main, NextScript } from 'next/document'
import { AppRegistry } from 'react-native-web';

export default class MyDocument extends Document {
  static async getInitialProps ({ renderPage }) {
    AppRegistry.registerComponent('Main', () => Main);
    const { stylesheet } = AppRegistry.getApplication('Main');
    const page = renderPage();
    const styles = <style dangerouslySetInnerHTML={{ __html: stylesheet }} />;
    return { ...page, styles };
  }

  render () {
    return (
      <html>
        <Head>
          <title>My page</title>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

@necolas
Copy link
Owner

necolas commented May 2, 2017 •
edited
Loading

FYI, stylesheet is an HTML string

We could add an example to the Next.js repo

@cloudle cloudle mentioned this issue Jun 24, 2017
Closed
@dcalhoun dcalhoun mentioned this issue Feb 9, 2018
Closed
1 task
@dcalhoun
Copy link
Contributor

I've added a react-native-web example to the Next.js repository.

@5ervant
Copy link

5ervant commented Aug 18, 2019

May I ask how will you make react-navigation work on a Next.js application? @scf4

@LunatiqueCoder LunatiqueCoder mentioned this issue Dec 19, 2022
Closed
@Gregoirevda
Copy link

@dcalhoun This is working well for inline styles and styles generated with the StyleSheet api, but I'm using classes and that doesn't seem to work.
The reason seems simply because my tailwind classes are defined before the react-native-stylesheet styles.
So the default styles are overriding my tailwind classes. Do you know how I could set them after? tailwind classes are imported from _app.tsx

@dcalhoun
Copy link
Contributor

👋🏻 @Gregoirevda. This issue is very old. Also, it has been a while since I worked with Next.js and React Native for Web.

I recommend opening a new discussion in this project seeking help. Doing so is more likely to gain visibility and assistance from the maintainers or others. Hope this helps. 🙇🏻‍♂️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@necolas @dcalhoun @scf4 @Gregoirevda @5ervant